@synerise/ds-context-selector 0.25.13 → 0.25.15

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* **context-selector:** make texts optional prop ([44279cf](https://github.com/Synerise/synerise-design/commit/44279cf859db1d3a9ea4ac0fc6e927423fb63407))
+
+
+
+
+
+## [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)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
 ## [0.25.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.12...@synerise/ds-context-selector@0.25.13) (2024-11-12)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/README.md

@@ -89,7 +89,7 @@ import ContextSelector from '@synerise/ds-context-selector'
 | onSelectItem              | Callback called when user selects item                        | (item: ContextItem \ ContextGroup \ undefined) => void | -                     | 
 | defaultDropdownVisibility | default visibility of dropdown                                | boolean                                                | false                 |
 | opened                    | Whether if dropdown should opens from outside of component    | boolean                                                | false                 | 
-| texts                     | Translations object                                           | ContextSelectorTexts                                   | -                     | 
+| texts                     | Translations object                                           | ContextTexts                                   | -                     | 
 | selectedItem              | Selected item                                                 | ContextItem \ undefined                                | undefined             | 
 | addMode                   | If true trigger doesn't change style when value is set        | ContextItem \ undefined                                | undefined             | 
 | customTriggerComponent    | Add custom trigger                                            | React.ReactNode                                        | undefined             | 
@@ -139,11 +139,14 @@ import ContextSelector from '@synerise/ds-context-selector'
 | customSuffix  | Use custom suffix instead of default 'check' icon                | React.ReactNode | -       |
 
 
-### ContextSelectorTexts
+### ContextTexts
+| Property             | Description                               | Type      | Default      |
+|----------------------|-------------------------------------------|-----------|--------------|
+| buttonLabel          | Button label                              | ReactNode | 'Choose'     |
+| noResults            | No results info                           | ReactNode | 'No results' |
+| searchPlaceholder    | Search box placeholder                    | string    | 'Search'     |
+| showMore             | Show more button label                    | ReactNode | 'Show more'  |
+| recentItemsGroupName | Dropdown section title for recent results | string    | 'Recent'     |
+| allItemsGroupName    | Dropdown section title for all results    | string    | 'All'        |
 
-| Property          | Description            | Type                     | Default      | 
-| ---               | ---                    | ---                      | ---          | 
-| buttonLabel       | Button label           | string \ React.ReactNode | 'Choose'     | 
-| noResults         | No results info        | string \ React.ReactNode | 'No results' | 
-| searchPlaceholder | Search box placeholder | string                   | 'Search'     | 
- 
+ 

package/dist/ContextSelector.js

@@ -1,10 +1,14 @@
-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); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
-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; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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; }
+
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+
+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); }
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Button from '@synerise/ds-button';
@@ -16,6 +20,7 @@ import { getPopupContainer } from '@synerise/ds-utils';
 import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDropdown';
 import { ItemWrapper, ErrorWrapper } from './ContextSelector.styles';
 import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from './constants';
+import { useTexts } from './hooks/useTexts';
 
 var ContextSelector = function ContextSelector(_ref) {
   var defaultDropdownVisibility = _ref.defaultDropdownVisibility,
@@ -53,6 +58,7 @@ var ContextSelector = function ContextSelector(_ref) {
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       getMenuEntryProps = _ref.getMenuEntryProps,
       dropdownDimensionsConfig = _ref.dropdownDimensionsConfig;
+  var allTexts = useTexts(texts);
 
   var _useState = useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
       dropdownVisible = _useState[0],
@@ -110,7 +116,7 @@ var ContextSelector = function ContextSelector(_ref) {
     setDropdownVisible(true);
   }, [onOpen]);
   var triggerButton = useMemo(function () {
-    var buttonLabel = texts.buttonLabel;
+    var buttonLabel = allTexts.buttonLabel;
     var hasError = Boolean(errorText);
     return addMode && !selectedItem ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
       error: hasError,
@@ -158,7 +164,7 @@ var ContextSelector = function ContextSelector(_ref) {
         } : undefined
       }, getMenuEntryProps == null ? void 0 : getMenuEntryProps(selectedItem))]
     });
-  }, [texts, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride, errorText, getMenuEntryProps]);
+  }, [allTexts, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride, errorText, getMenuEntryProps]);
   var onDropdownVisibilityChange = useCallback(function (value) {
     if (value) {
       onActivate && onActivate('');
@@ -184,7 +190,7 @@ var ContextSelector = function ContextSelector(_ref) {
       groups: groups,
       items: items,
       recentItems: recentItems,
-      texts: texts,
+      texts: allTexts,
       visible: dropdownVisible,
       loading: loading,
       menuItemHeight: menuItemHeight,

package/dist/ContextSelector.types.d.ts

@@ -5,11 +5,14 @@ import type { FactorsProps } from '@synerise/ds-factors';
 import type { InformationCardProps } from '@synerise/ds-information-card';
 import type { ListItemProps, ItemSize } from '@synerise/ds-list-item';
 export type ContextTexts = {
-    buttonLabel: string;
+    buttonLabel: ReactNode;
     searchPlaceholder: string;
-    loadingResults: string;
-    noResults: string;
-    showMore: string;
+    /**
+     * @deprecated - Skeleton is displayed instead
+     */
+    loadingResults?: string;
+    noResults: ReactNode;
+    showMore: ReactNode;
     recentItemsGroupName: string;
     allItemsGroupName: string;
 };
@@ -55,7 +58,7 @@ export type ContextProps = {
     groups: ContextGroup[];
     items: ContextItem[];
     recentItems?: ContextItem[];
-    texts: ContextTexts;
+    texts?: Partial<ContextTexts>;
     getPopupContainerOverride?: (trigger: HTMLElement | null) => HTMLElement;
     onSetGroup?: (item: ContextItem | ContextGroup | undefined) => void;
     opened?: boolean;

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js

@@ -1,12 +1,16 @@
 var _ITEM_SIZE;
 
-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); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
-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; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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; }
+
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+
+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); }
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { v4 as uuid } from 'uuid';

package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.js

@@ -1,6 +1,6 @@
 var _excluded = ["id", "icon"];
 
-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); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 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; }
 

package/dist/hooks/useTexts.d.ts

@@ -0,0 +1,2 @@
+import type { ContextTexts } from '../ContextSelector.types';
+export declare const useTexts: (defaultTexts?: Partial<ContextTexts>) => ContextTexts;

package/dist/hooks/useTexts.js

@@ -0,0 +1,46 @@
+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; }
+
+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; }
+
+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; }
+
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+
+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); }
+
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+export var useTexts = function useTexts(defaultTexts) {
+  var _useIntl = useIntl(),
+      formatMessage = _useIntl.formatMessage;
+
+  var texts = useMemo(function () {
+    return _objectSpread({
+      buttonLabel: formatMessage({
+        id: 'DS.CONTEXT-SELECTOR.BUTTON_LABEL',
+        defaultMessage: 'Choose'
+      }),
+      searchPlaceholder: formatMessage({
+        id: 'DS.CONTEXT-SELECTOR.SEARCH_PLACEHOLDER',
+        defaultMessage: 'Search'
+      }),
+      noResults: formatMessage({
+        id: 'DS.CONTEXT-SELECTOR.NO_RESULTS',
+        defaultMessage: 'No results'
+      }),
+      showMore: formatMessage({
+        id: 'DS.CONTEXT-SELECTOR.SHOW_MORE',
+        defaultMessage: 'Show more'
+      }),
+      recentItemsGroupName: formatMessage({
+        id: 'DS.CONTEXT-SELECTOR.RECENT',
+        defaultMessage: 'Recent'
+      }),
+      allItemsGroupName: formatMessage({
+        id: 'DS.CONTEXT-SELECTOR.ALL',
+        defaultMessage: 'All'
+      })
+    }, defaultTexts);
+  }, [defaultTexts, formatMessage]);
+  return texts;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "0.25.13",
+  "version": "0.25.15",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -28,26 +28,26 @@
     "types": "tsc --noEmit",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
-  "gitHead": "1bb66dcc360a650e81b9bd195d5b77aa8ae2d308",
+  "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.17",
-    "@synerise/ds-divider": "^0.7.13",
-    "@synerise/ds-dropdown": "^0.18.22",
-    "@synerise/ds-factors": "^0.27.0",
-    "@synerise/ds-icon": "^0.66.3",
-    "@synerise/ds-information-card": "^0.6.0",
-    "@synerise/ds-list-item": "^0.4.17",
-    "@synerise/ds-menu": "^0.20.4",
-    "@synerise/ds-result": "^0.7.12",
-    "@synerise/ds-scrollbar": "^0.11.17",
-    "@synerise/ds-skeleton": "^0.6.16",
-    "@synerise/ds-tabs": "^0.17.5",
-    "@synerise/ds-utils": "^0.31.0",
+    "@synerise/ds-button": "^0.21.19",
+    "@synerise/ds-divider": "^0.7.15",
+    "@synerise/ds-dropdown": "^0.18.24",
+    "@synerise/ds-factors": "^0.27.2",
+    "@synerise/ds-icon": "^0.67.0",
+    "@synerise/ds-information-card": "^0.6.2",
+    "@synerise/ds-list-item": "^0.4.19",
+    "@synerise/ds-menu": "^0.20.6",
+    "@synerise/ds-result": "^0.7.14",
+    "@synerise/ds-scrollbar": "^0.11.19",
+    "@synerise/ds-skeleton": "^0.6.18",
+    "@synerise/ds-tabs": "^0.17.7",
+    "@synerise/ds-utils": "^0.31.2",
     "react-window": "1.8.5",
     "uuid": "^8.3.2"
   },