@synerise/ds-context-selector 0.25.14 → 0.25.16

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.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.25.15...@synerise/ds-context-selector@0.25.16) (2024-11-22)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
+## [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

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,15 +1,9 @@
 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); 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 React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Button from '@synerise/ds-button';
 import Icon, { Add3M, AngleDownS } from '@synerise/ds-icon';
@@ -20,63 +14,59 @@ 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,
-      selectedItem = _ref.selectedItem,
-      onSelectItem = _ref.onSelectItem,
-      onSetGroup = _ref.onSetGroup,
-      groups = _ref.groups,
-      items = _ref.items,
-      recentItems = _ref.recentItems,
-      texts = _ref.texts,
-      opened = _ref.opened,
-      addMode = _ref.addMode,
-      loading = _ref.loading,
-      customTriggerComponent = _ref.customTriggerComponent,
-      _ref$trigger = _ref.trigger,
-      trigger = _ref$trigger === void 0 ? ['click'] : _ref$trigger,
-      menuItemHeight = _ref.menuItemHeight,
-      dropdownWrapperStyles = _ref.dropdownWrapperStyles,
-      onClickOutsideEvents = _ref.onClickOutsideEvents,
-      onClickOutside = _ref.onClickOutside,
-      onSearch = _ref.onSearch,
-      _ref$hideSearchField = _ref.hideSearchField,
-      hideSearchField = _ref$hideSearchField === void 0 ? false : _ref$hideSearchField,
-      hasMoreItems = _ref.hasMoreItems,
-      onFetchData = _ref.onFetchData,
-      onActivate = _ref.onActivate,
-      onDeactivate = _ref.onDeactivate,
-      onOpen = _ref.onOpen,
-      getPopupContainerOverride = _ref.getPopupContainerOverride,
-      type = _ref.type,
-      dropdownProps = _ref.dropdownProps,
-      disabled = _ref.disabled,
-      errorText = _ref.errorText,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      getMenuEntryProps = _ref.getMenuEntryProps,
-      dropdownDimensionsConfig = _ref.dropdownDimensionsConfig;
-
+    selectedItem = _ref.selectedItem,
+    onSelectItem = _ref.onSelectItem,
+    onSetGroup = _ref.onSetGroup,
+    groups = _ref.groups,
+    items = _ref.items,
+    recentItems = _ref.recentItems,
+    texts = _ref.texts,
+    opened = _ref.opened,
+    addMode = _ref.addMode,
+    loading = _ref.loading,
+    customTriggerComponent = _ref.customTriggerComponent,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? ['click'] : _ref$trigger,
+    menuItemHeight = _ref.menuItemHeight,
+    dropdownWrapperStyles = _ref.dropdownWrapperStyles,
+    onClickOutsideEvents = _ref.onClickOutsideEvents,
+    onClickOutside = _ref.onClickOutside,
+    onSearch = _ref.onSearch,
+    _ref$hideSearchField = _ref.hideSearchField,
+    hideSearchField = _ref$hideSearchField === void 0 ? false : _ref$hideSearchField,
+    hasMoreItems = _ref.hasMoreItems,
+    onFetchData = _ref.onFetchData,
+    onActivate = _ref.onActivate,
+    onDeactivate = _ref.onDeactivate,
+    onOpen = _ref.onOpen,
+    getPopupContainerOverride = _ref.getPopupContainerOverride,
+    type = _ref.type,
+    dropdownProps = _ref.dropdownProps,
+    disabled = _ref.disabled,
+    errorText = _ref.errorText,
+    _ref$readOnly = _ref.readOnly,
+    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],
-      setDropdownVisible = _useState[1];
-
+    dropdownVisible = _useState[0],
+    setDropdownVisible = _useState[1];
   var dimensionsConfig = _objectSpread({
     defaultHeight: DROPDOWN_HEIGHT,
     lowerHeight: DROPDOWN_HEIGHT_BELOW_THRESHOLD,
     threshold: DROPDOWN_HEIGHT_THRESHOLD
   }, dropdownDimensionsConfig);
-
   var _useState2 = useState(dimensionsConfig.defaultHeight),
-      outerHeight = _useState2[0],
-      setOuterHeight = _useState2[1];
-
+    outerHeight = _useState2[0],
+    setOuterHeight = _useState2[1];
   useEffect(function () {
     var checkViewportHeight = function checkViewportHeight() {
       return setOuterHeight(window.innerHeight < dimensionsConfig.threshold ? dimensionsConfig.lowerHeight : dimensionsConfig.defaultHeight);
     };
-
     checkViewportHeight();
     window.addEventListener('resize', checkViewportHeight);
     return function () {
@@ -102,7 +92,6 @@ var ContextSelector = function ContextSelector(_ref) {
     if (selectedItem) {
       return readOnly ? 'icon-label' : 'two-icons';
     }
-
     return readOnly ? 'simple' : 'label-icon';
   }, [selectedItem, readOnly]);
   var triggerColor = useMemo(function () {
@@ -114,7 +103,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,
@@ -162,7 +151,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('');
@@ -188,7 +177,7 @@ var ContextSelector = function ContextSelector(_ref) {
       groups: groups,
       items: items,
       recentItems: recentItems,
-      texts: texts,
+      texts: allTexts,
       visible: dropdownVisible,
       loading: loading,
       menuItemHeight: menuItemHeight,
@@ -203,5 +192,4 @@ var ContextSelector = function ContextSelector(_ref) {
     })
   }), customTriggerComponent != null ? customTriggerComponent : triggerButton)), errorText && /*#__PURE__*/React.createElement(ErrorWrapper, null, errorText));
 };
-
 export default ContextSelector;

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,17 +1,10 @@
 var _ITEM_SIZE;
-
 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); 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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { VariableSizeList } from 'react-window';
@@ -29,35 +22,33 @@ import ContextSelectorDropdownItem from './ContextSelectorDropdownItem';
 import { NO_GROUP_NAME, DROPDOWN_HEIGHT, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, SEARCH_HEIGHT } from '../constants';
 import { isGroup, isListTitle } from './utils';
 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);
-
 function isDivider(element) {
   return element.type === 'divider';
 }
-
 var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var texts = _ref.texts,
-      setSelected = _ref.setSelected,
-      onSetGroup = _ref.onSetGroup,
-      groups = _ref.groups,
-      items = _ref.items,
-      recentItems = _ref.recentItems,
-      setDropdownVisible = _ref.setDropdownVisible,
-      value = _ref.value,
-      visible = _ref.visible,
-      _ref$hideSearchField = _ref.hideSearchField,
-      hideSearchField = _ref$hideSearchField === void 0 ? false : _ref$hideSearchField,
-      loading = _ref.loading,
-      menuItemHeight = _ref.menuItemHeight,
-      dropdownWrapperStyles = _ref.dropdownWrapperStyles,
-      onClickOutsideEvents = _ref.onClickOutsideEvents,
-      onClickOutside = _ref.onClickOutside,
-      onSearch = _ref.onSearch,
-      onFetchData = _ref.onFetchData,
-      hasMoreItems = _ref.hasMoreItems,
-      _ref$outerHeight = _ref.outerHeight,
-      outerHeight = _ref$outerHeight === void 0 ? DROPDOWN_HEIGHT : _ref$outerHeight,
-      _ref$maxSearchResults = _ref.maxSearchResultsInGroup,
-      maxSearchResultsInGroup = _ref$maxSearchResults === void 0 ? 4 : _ref$maxSearchResults;
+    setSelected = _ref.setSelected,
+    onSetGroup = _ref.onSetGroup,
+    groups = _ref.groups,
+    items = _ref.items,
+    recentItems = _ref.recentItems,
+    setDropdownVisible = _ref.setDropdownVisible,
+    value = _ref.value,
+    visible = _ref.visible,
+    _ref$hideSearchField = _ref.hideSearchField,
+    hideSearchField = _ref$hideSearchField === void 0 ? false : _ref$hideSearchField,
+    loading = _ref.loading,
+    menuItemHeight = _ref.menuItemHeight,
+    dropdownWrapperStyles = _ref.dropdownWrapperStyles,
+    onClickOutsideEvents = _ref.onClickOutsideEvents,
+    onClickOutside = _ref.onClickOutside,
+    onSearch = _ref.onSearch,
+    onFetchData = _ref.onFetchData,
+    hasMoreItems = _ref.hasMoreItems,
+    _ref$outerHeight = _ref.outerHeight,
+    outerHeight = _ref$outerHeight === void 0 ? DROPDOWN_HEIGHT : _ref$outerHeight,
+    _ref$maxSearchResults = _ref.maxSearchResultsInGroup,
+    maxSearchResultsInGroup = _ref$maxSearchResults === void 0 ? 4 : _ref$maxSearchResults;
   var listStyle = {
     overflowX: 'unset',
     overflowY: 'unset'
@@ -71,27 +62,21 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var listRef = useRef(null);
   var overlayRef = useRef(null);
   var scrollBarRef = useRef(null);
-
   var _useState = useState(),
-      searchInputHandle = _useState[0],
-      setSearchInputHandle = _useState[1];
-
+    searchInputHandle = _useState[0],
+    setSearchInputHandle = _useState[1];
   var _useState2 = useState(''),
-      searchQuery = _useState2[0],
-      setSearchQuery = _useState2[1];
-
+    searchQuery = _useState2[0],
+    setSearchQuery = _useState2[1];
   var _useState3 = useState(defaultTab),
-      activeTab = _useState3[0],
-      setActiveTab = _useState3[1];
-
+    activeTab = _useState3[0],
+    setActiveTab = _useState3[1];
   var _useState4 = useState(undefined),
-      activeGroup = _useState4[0],
-      setActiveGroup = _useState4[1];
-
+    activeGroup = _useState4[0],
+    setActiveGroup = _useState4[1];
   var _useState5 = useState(true),
-      searchInputCanBeFocused = _useState5[0],
-      setSearchInputFocus = _useState5[1];
-
+    searchInputCanBeFocused = _useState5[0],
+    setSearchInputFocus = _useState5[1];
   var classNames = useMemo(function () {
     return "ds-context-item ds-context-item-" + uuid();
   }, []);
@@ -132,16 +117,14 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
   var groupByGroupName = useCallback(function (dropdownItems, maxItemsInGroup) {
     var itemsNumber = dropdownItems == null ? void 0 : dropdownItems.length;
     var groupedItems = {};
-
     for (var i = 0; i < itemsNumber; i += 1) {
-      var item = dropdownItems[i]; // @ts-ignore
-
+      var item = dropdownItems[i];
+      // @ts-ignore
       var groupName = item.groupName || NO_GROUP_NAME;
       var group = groupedItems[groupName] || [];
       group.push(item);
       groupedItems[groupName] = group;
     }
-
     var resultItems = [];
     Object.keys(groupedItems).forEach(function (key, index) {
       if (index > 0) {
@@ -149,14 +132,12 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
           type: 'divider'
         });
       }
-
       if (key !== NO_GROUP_NAME && !activeGroup) {
         resultItems.push({
           type: 'title',
           title: key
         });
       }
-
       var groupItems = maxItemsInGroup ? groupedItems[key].slice(0, maxItemsInGroup) : groupedItems[key];
       groupItems.forEach(function (item) {
         var resultItem = item.isGroup ? {
@@ -177,7 +158,6 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
         };
         resultItems.push(resultItem);
       });
-
       if (maxItemsInGroup && groupedItems[key].length > maxItemsInGroup) {
         var anyItem = groupItems[0];
         resultItems.push({
@@ -196,10 +176,8 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     });
     return resultItems;
   }, [activeGroup, classNames, searchQuery, handleOnSetGroup, menuItemHeight, clearSearch, hideDropdown, handleSelect, value, texts.showMore, groups]);
-
   var _useSearchResults = useSearchResults(items, groups, activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup),
-      searchResults = _useSearchResults.searchResults;
-
+    searchResults = _useSearchResults.searchResults;
   var hasSubgroups = useMemo(function () {
     return Boolean(currentTabItems == null ? void 0 : currentTabItems.subGroups);
   }, [currentTabItems]);
@@ -207,10 +185,8 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     if (!onSearch && searchQuery) {
       return searchResults;
     }
-
     if (hasSubgroups && !activeGroup) {
       var _currentTabItems$subG;
-
       var subGroups = hasSubgroups ? currentTabItems == null || (_currentTabItems$subG = currentTabItems.subGroups) == null ? void 0 : _currentTabItems$subG.map(function (group) {
         return _objectSpread({}, group, {
           isGroup: true
@@ -222,24 +198,20 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
             isGroup: false
           }));
         }
-
         return prev;
       }, []);
       return groupByGroupName([].concat(subGroups || [], subItems));
     }
-
     if (activeGroup) {
       return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
         return activeGroup && item.groupId === activeGroup.id;
       }));
     }
-
     if (activeTab && groups && groups[activeTab]) {
       return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
         return item.groupId === groups[activeTab].id;
       }));
     }
-
     if ((recentItems || []).length > 0) {
       var recentItemsWithGroup = (recentItems || []).map(function (item) {
         return _objectSpread({}, item, {
@@ -254,12 +226,10 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
       var result = groupByGroupName(recentItemsWithGroup.concat(itemsWithAllGroup));
       return result;
     }
-
     return groupByGroupName(items);
   }, [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]);
   useEffect(function () {
     var _listRef$current;
-
     // eslint-disable-next-line no-unused-expressions
     (_listRef$current = listRef.current) == null || _listRef$current.resetAfterIndex(0, false);
   }, [activeItems, listRef]);
@@ -283,23 +253,19 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
       description: texts.noResults
     });
   }, [texts]);
-
   var handleScroll = function handleScroll(_ref2) {
     var currentTarget = _ref2.currentTarget;
     var scrollTop = currentTarget.scrollTop;
-
     if (listRef.current !== null) {
       listRef.current.scrollTo(scrollTop);
     }
   };
-
   var getItemSize = function getItemSize(index) {
     var item = activeItems[index];
     if (isListTitle(item)) return ITEM_SIZE.title;
     if (isDivider(item)) return ITEM_SIZE.divider;
     return menuItemHeight ? ITEM_SIZE[menuItemHeight] : ITEM_SIZE[itemSizes.DEFAULT];
   };
-
   var dropdownContentHeight = useMemo(function () {
     return outerHeight - (hasTabs && !searchQuery ? TABS_HEIGHT : 0) - (activeGroup ? SUBGROUP_HEADER_HEIGHT : 0) - SEARCH_HEIGHT;
   }, [activeGroup, hasTabs, outerHeight, searchQuery]);
@@ -318,11 +284,9 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     ref: overlayRef,
     onKeyDown: function onKeyDown(event) {
       var _document;
-
       if (((_document = document) == null ? void 0 : _document.activeElement) === (searchInputHandle == null ? void 0 : searchInputHandle.current)) {
         setSearchInputFocus(false);
       }
-
       searchQuery && focusWithArrowKeys(event, classNames.split(' ')[1], function () {
         setSearchInputFocus(true);
       });
@@ -387,9 +351,8 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     ref: listRef
   }, function (_ref3) {
     var index = _ref3.index,
-        style = _ref3.style;
+      style = _ref3.style;
     var item = activeItems[index];
-
     if (item && isDivider(item)) {
       return /*#__PURE__*/React.createElement("div", {
         style: style
@@ -398,7 +361,6 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
         marginBottom: 8
       }));
     }
-
     return item && isListTitle(item) ? /*#__PURE__*/React.createElement(S.Title, {
       style: style
     }, item.title) : /*#__PURE__*/React.createElement(ContextSelectorDropdownItem, _extends({
@@ -406,5 +368,4 @@ var ContextSelectorDropdown = function ContextSelectorDropdown(_ref) {
     }, item));
   })) : getNoResultContainer));
 };
-
 export default ContextSelectorDropdown;

package/dist/ContextSelectorDropdown/ContextSelectorDropdownItem.js

@@ -1,30 +1,24 @@
 var _excluded = ["id", "icon"];
-
 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; }
-
 import React from 'react';
 import Icon, { CheckS } from '@synerise/ds-icon';
 import ListItem from '@synerise/ds-list-item';
 import { theme } from '@synerise/ds-core';
-
 var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
   var item = _ref.item,
-      clearSearch = _ref.clearSearch,
-      searchQuery = _ref.searchQuery,
-      hideDropdown = _ref.hideDropdown,
-      select = _ref.select,
-      selected = _ref.selected,
-      className = _ref.className,
-      menuItemHeight = _ref.menuItemHeight,
-      style = _ref.style,
-      label = _ref.label;
-
+    clearSearch = _ref.clearSearch,
+    searchQuery = _ref.searchQuery,
+    hideDropdown = _ref.hideDropdown,
+    select = _ref.select,
+    selected = _ref.selected,
+    className = _ref.className,
+    menuItemHeight = _ref.menuItemHeight,
+    style = _ref.style,
+    label = _ref.label;
   var id = item.id,
-      _ = item.icon,
-      itemProps = _objectWithoutPropertiesLoose(item, _excluded);
-
+    _ = item.icon,
+    itemProps = _objectWithoutPropertiesLoose(item, _excluded);
   return /*#__PURE__*/React.createElement(ListItem, _extends({
     style: style,
     className: className,
@@ -46,5 +40,4 @@ var ContextSelectorDropdownItem = function ContextSelectorDropdownItem(_ref) {
     description: item.description
   }, itemProps), label || item.name);
 };
-
 export default ContextSelectorDropdownItem;

package/dist/constants.js

@@ -1,5 +1,4 @@
 var _ITEM_SIZE;
-
 import { ItemSize } from '@synerise/ds-menu';
 export var NO_GROUP_NAME = 'NO_GROUP_NAME';
 export var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[ItemSize.LARGE] = 50, _ITEM_SIZE[ItemSize.DEFAULT] = 32, _ITEM_SIZE.title = 32, _ITEM_SIZE);

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,40 @@
+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.14",
+  "version": "0.25.16",
   "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": "8d26191fc0475407e0691b9b183761ad3cd7c87d",
+  "gitHead": "e9897e5ecb13a9c022f5ed002db76e4ab78318c5",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.18",
-    "@synerise/ds-divider": "^0.7.14",
-    "@synerise/ds-dropdown": "^0.18.23",
-    "@synerise/ds-factors": "^0.27.1",
-    "@synerise/ds-icon": "^0.66.4",
-    "@synerise/ds-information-card": "^0.6.1",
-    "@synerise/ds-list-item": "^0.4.18",
-    "@synerise/ds-menu": "^0.20.5",
-    "@synerise/ds-result": "^0.7.13",
-    "@synerise/ds-scrollbar": "^0.11.18",
-    "@synerise/ds-skeleton": "^0.6.17",
-    "@synerise/ds-tabs": "^0.17.6",
-    "@synerise/ds-utils": "^0.31.1",
+    "@synerise/ds-button": "^0.21.19",
+    "@synerise/ds-divider": "^0.7.15",
+    "@synerise/ds-dropdown": "^0.18.24",
+    "@synerise/ds-factors": "^0.27.3",
+    "@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"
   },