@synerise/ds-factors 0.26.3 → 0.26.5

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.26.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.26.4...@synerise/ds-factors@0.26.5) (2024-10-29)
+
+**Note:** Version bump only for package @synerise/ds-factors
+
+
+
+
+
+## [0.26.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.26.3...@synerise/ds-factors@0.26.4) (2024-10-28)
+
+**Note:** Version bump only for package @synerise/ds-factors
+
+
+
+
+
 ## [0.26.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.26.2...@synerise/ds-factors@0.26.3) (2024-10-24)
 
 **Note:** Version bump only for package @synerise/ds-factors

package/dist/FactorValue/Parameter/ParameterDropdown.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { ParameterDropdownProps } from '../../Factors.types';
+export type TitleItem = {
+    type: 'title';
+    title: string;
+};
+export type DividerItem = {
+    type: 'divider';
+};
 declare const ParameterDropdown: ({ setSelected, texts, groups, items, recentItems, setDropdownVisible, loading, onFetchData, hasMoreItems, outerHeight, value, renderEmptyGroups, maxSearchResultsInGroup, }: ParameterDropdownProps) => React.JSX.Element;
 export default ParameterDropdown;

package/dist/FactorValue/Parameter/ParameterDropdown.js

@@ -9,6 +9,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
 import Dropdown from '@synerise/ds-dropdown';
+import Divider from '@synerise/ds-divider';
 import Icon, { ArrowRightCircleM, SearchM } from '@synerise/ds-icon';
 import Tabs from '@synerise/ds-tabs';
 import { useSearchResults, getGroupName, focusWithArrowKeys, useOnClickOutside, getClosest } from '@synerise/ds-utils';
@@ -18,6 +19,7 @@ import Scrollbar from '@synerise/ds-scrollbar';
 import { itemSizes } from '@synerise/ds-list-item';
 import * as S from './Parameter.style';
 import ParameterDropdownItem from './ParameterDropdownItem';
+import { groupItems } from './utils';
 import { useGroups } from './useGroups';
 import { DROPDOWN_HEIGHT, SEARCH_HEGIHT, TABS_HEIGHT, SUBGROUP_HEADER_HEIGHT, ITEM_SIZE, LIST_STYLE, NO_GROUP_NAME } from './Parameter.constants';
 
@@ -25,6 +27,10 @@ var isListTitle = function isListTitle(element) {
   return element.title !== undefined;
 };
 
+var isDivider = function isDivider(item) {
+  return item.type === 'divider';
+};
+
 var ParameterDropdown = function ParameterDropdown(_ref) {
   var setSelected = _ref.setSelected,
       texts = _ref.texts,
@@ -80,15 +86,22 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
       return activeTab === index;
     });
   }, [visibleGroups, activeTab]);
+  var resetList = React.useCallback(function () {
+    if (listRef.current) {
+      listRef.current.resetAfterIndex(0, false);
+    }
+  }, [listRef]);
   var clearSearch = useCallback(function () {
     setSearchQuery('');
-  }, []);
+    resetList();
+  }, [setSearchQuery, resetList]);
   var handleOnSetGroup = useCallback(function (item) {
     setActiveGroup(item);
   }, []);
   var hideDropdown = useCallback(function () {
     setDropdownVisible(false);
-  }, [setDropdownVisible]);
+    resetList();
+  }, [setDropdownVisible, resetList]);
   var groupByGroupName = useCallback(function (dropdownItems, maxItemsInGroup) {
     var itemsNumber = dropdownItems == null ? void 0 : dropdownItems.length;
     var groupedItems = {};
@@ -111,8 +124,8 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
         });
       }
 
-      var groupItems = maxItemsInGroup ? groupedItems[key].slice(0, maxItemsInGroup) : groupedItems[key];
-      groupItems.forEach(function (item) {
+      var maxGroupedItems = maxItemsInGroup ? groupedItems[key].slice(0, maxItemsInGroup) : groupedItems[key];
+      maxGroupedItems.forEach(function (item) {
         var resultItem = !item.groupId ? {
           className: classNames,
           item: item,
@@ -131,7 +144,7 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
       });
 
       if (maxItemsInGroup && groupedItems[key].length > maxItemsInGroup) {
-        var anyItem = groupItems[0];
+        var anyItem = maxGroupedItems[0];
         resultItems.push({
           className: classNames,
           select: handleOnSetGroup,
@@ -152,6 +165,15 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
   var _useSearchResults = useSearchResults(items || [], groups || [], activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup),
       searchResults = _useSearchResults.searchResults;
 
+  var mapItemToDropdownItem = React.useCallback(function (item) {
+    return {
+      className: classNames,
+      item: item,
+      searchQuery: searchQuery,
+      hideDropdown: hideDropdown,
+      select: setSelected
+    };
+  }, [classNames, searchQuery, hideDropdown, setSelected]);
   var currentItems = useMemo(function () {
     if (searchQuery) {
       return searchResults;
@@ -160,30 +182,33 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
     var hasSubgroups = Boolean(currentTabItems == null ? void 0 : currentTabItems.subGroups);
 
     if (hasSubgroups && !activeGroup) {
-      var _currentTabItems$subG;
-
-      return currentTabItems == null || (_currentTabItems$subG = currentTabItems.subGroups) == null ? void 0 : _currentTabItems$subG.map(function (subGroup) {
+      var groupedItems = (items || []).filter(function (item) {
+        return item.groupId === (currentTabItems == null ? void 0 : currentTabItems.id);
+      }).map(mapItemToDropdownItem);
+      var subGroups = ((currentTabItems == null ? void 0 : currentTabItems.subGroups) || []).map(function (subGroup) {
         return {
           className: classNames,
           item: subGroup,
           searchQuery: searchQuery,
-          select: setActiveGroup
+          select: function select(group) {
+            setActiveGroup(group);
+            resetList();
+          }
         };
       });
+      return groupItems([].concat(groupedItems, subGroups), activeGroup);
     }
 
     if (activeGroup) {
-      return items == null ? void 0 : items.filter(function (item) {
+      return groupItems((items || []).filter(function (item) {
         return item.groupId === activeGroup.id;
-      }).map(function (item) {
-        return {
-          className: classNames,
-          item: item,
-          searchQuery: searchQuery,
-          hideDropdown: hideDropdown,
-          select: setSelected
-        };
-      });
+      }).map(mapItemToDropdownItem), activeGroup);
+    }
+
+    if (activeTab && groups && groups[activeTab]) {
+      return groupItems((items || []).filter(function (item) {
+        return item.groupId === groups[activeTab].id;
+      }).map(mapItemToDropdownItem), activeGroup);
     }
 
     if (activeTab && visibleGroups && visibleGroups[activeTab]) {
@@ -224,7 +249,7 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
         select: setSelected
       };
     });
-  }, [searchQuery, currentTabItems, activeGroup, visibleGroups, items, searchResults, classNames, hideDropdown, setSelected, activeTab, groupByGroupName, recentItems, texts.parameter.allItemsGroupName, texts.parameter.recentItemsGroupName]);
+  }, [searchQuery, currentTabItems, activeGroup, visibleGroups, items, searchResults, classNames, hideDropdown, setSelected, activeTab, groupByGroupName, recentItems, groups, mapItemToDropdownItem, resetList, texts.parameter.allItemsGroupName, texts.parameter.recentItemsGroupName]);
   var handleSearch = useCallback(function (newSearchQuery) {
     setSearchQuery(newSearchQuery);
   }, [setSearchQuery]);
@@ -299,6 +324,7 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
     handleTabClick: function handleTabClick(index) {
       setActiveTab(index);
       setActiveGroup(undefined);
+      resetList();
     }
   })), activeGroup && /*#__PURE__*/React.createElement(Dropdown.BackAction, {
     label: activeGroup.name,
@@ -334,13 +360,18 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
         style = _ref3.style;
     var listItem = currentItems[index];
 
-    if (isListTitle(listItem)) {
-      return /*#__PURE__*/React.createElement(S.Title, {
+    if (listItem && isDivider(listItem)) {
+      return /*#__PURE__*/React.createElement("div", {
         style: style
-      }, listItem.title);
+      }, /*#__PURE__*/React.createElement(Divider, {
+        marginTop: 8,
+        marginBottom: 8
+      }));
     }
 
-    return /*#__PURE__*/React.createElement(ParameterDropdownItem, _extends({
+    return isListTitle(listItem) ? /*#__PURE__*/React.createElement(S.Title, {
+      style: style
+    }, listItem.title) : /*#__PURE__*/React.createElement(ParameterDropdownItem, _extends({
       style: style
     }, listItem));
   })) : getNoResultContainer));

package/dist/FactorValue/Parameter/utils.d.ts

@@ -0,0 +1,4 @@
+import { ParameterGroup } from 'Factors.types';
+import { DropdownItem } from './Parameter.types';
+import { DividerItem, TitleItem } from './ParameterDropdown';
+export declare const groupItems: (dropdownItems: DropdownItem<ParameterGroup>[], activeGroup: ParameterGroup | undefined) => (DropdownItem<ParameterGroup> | TitleItem | DividerItem)[];

package/dist/FactorValue/Parameter/utils.js

@@ -0,0 +1,32 @@
+var NO_GROUP_NAME = 'NO_GROUP_NAME';
+export var groupItems = function groupItems(dropdownItems, activeGroup) {
+  var itemsNumber = dropdownItems.length;
+  var groupedItems = {};
+  var resultItems = [];
+
+  for (var i = 0; i < itemsNumber; i += 1) {
+    var item = dropdownItems[i];
+    var groupName = item.item.groupName || NO_GROUP_NAME;
+    var group = groupedItems[groupName] || [];
+    group.push(item);
+    groupedItems[groupName] = group;
+  }
+
+  Object.keys(groupedItems).forEach(function (key, index) {
+    if (key !== NO_GROUP_NAME && !activeGroup) {
+      if (index > 0) {
+        resultItems.push({
+          type: 'divider'
+        });
+      }
+
+      resultItems.push({
+        type: 'title',
+        title: key
+      });
+    }
+
+    resultItems = resultItems.concat(groupedItems[key]);
+  });
+  return resultItems;
+};

package/dist/Factors.d.ts

@@ -1,51 +1,5 @@
 import React from 'react';
-import { FactorsProps } from './Factors.types';
-export declare const factorTypes: {
-    text: {
-        icon: React.JSX.Element;
-        name: string;
-        input: ({ value, onChange, texts, textType, autocompleteText, factorType, opened, onDeactivate, error, inputProps, getPopupContainerOverride, readOnly, }: import("./Factors.types").InputProps) => React.JSX.Element;
-    };
-    number: {
-        icon: React.JSX.Element;
-        name: string;
-        input: ({ error, value, onChange, texts, opened, onDeactivate, readOnly }: import("./Factors.types").InputProps) => React.JSX.Element;
-    };
-    parameter: {
-        icon: React.JSX.Element;
-        name: string;
-        input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, loading, getMenuEntryProps, }: import("./Factors.types").InputProps) => React.JSX.Element;
-    };
-    contextParameter: {
-        icon: React.JSX.Element;
-        name: string;
-        input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, loading, getMenuEntryProps, }: import("./Factors.types").InputProps) => React.JSX.Element;
-    };
-    dynamicKey: {
-        icon: React.JSX.Element;
-        name: string;
-        input: React.FC<import("./Factors.types").InputProps>;
-    };
-    formula: {
-        icon: React.JSX.Element;
-        name: string;
-        input: ({ value, error, onChange, withoutTypeSelector, texts, formulaEditor, readOnly, }: import("./Factors.types").InputProps) => React.JSX.Element;
-    };
-    array: {
-        icon: React.JSX.Element;
-        name: string;
-        input: ({ value, onChange, texts, textType, autocompleteText, factorType, opened, onDeactivate, error, inputProps, getPopupContainerOverride, readOnly, }: import("./Factors.types").InputProps) => React.JSX.Element;
-    };
-    date: {
-        icon: React.JSX.Element;
-        name: string;
-        input: React.FC<import("./Factors.types").InputProps>;
-    };
-    dateRange: {
-        icon: React.JSX.Element;
-        name: string;
-        input: ({ getPopupContainerOverride, value, onChange, error, texts, onDeactivate, allowClear, readOnly, }: import("./Factors.types").InputProps) => React.JSX.Element;
-    };
-};
+import { DefinedFactorTypes, FactorsProps, SelectedFactorType } from './Factors.types';
+export declare const factorTypes: Record<DefinedFactorTypes, SelectedFactorType>;
 declare const Factors: ({ selectedFactorType, setSelectedFactorType, onChangeValue, onParamsClick, value, defaultFactorType, textType, unavailableFactorTypes, availableFactorTypes, parameters, autocompleteText, allowClear, withoutTypeSelector, texts, formulaEditor, opened, loading, factorKey, preventAutoloadData, onActivate, onDeactivate, getPopupContainerOverride, error, inputProps, readOnly, getMenuEntryProps, }: FactorsProps) => React.JSX.Element;
 export default Factors;

package/dist/Factors.types.d.ts

@@ -23,6 +23,7 @@ export type ParameterValueType = Pick<ListItemProps, 'renderHoverTooltip' | 'hov
     id: ReactText;
     groupId?: ReactText;
     description?: string;
+    value?: React.ReactText | null;
     informationCardProps?: Partial<InformationCardProps>;
 };
 export type ParameterGroup = {
@@ -32,13 +33,16 @@ export type ParameterGroup = {
     icon?: ReactNode;
     allowEmpty?: boolean;
     subGroups?: ParameterGroup[];
+    groupName?: string;
 };
 export type ParameterItem = {
     id: ReactText;
     name: string;
-    groupId: ReactText;
-    icon?: ReactNode;
+    groupId?: React.ReactText;
+    groupName?: string;
+    icon?: React.ReactNode;
     disabled?: boolean;
+    excludeFromSearchResults?: boolean;
 };
 export type FactorValueType = string | number | Date | undefined | DynamicKeyValueType | FormulaValueType | ParameterValueType | Partial<DateFilter>;
 export type SelectedFactorType = {

package/dist/style/Factors.style.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 import { InputGroup } from '@synerise/ds-input';
 import { OuterWrapper } from '@synerise/ds-input/dist/Input.styles';
 import { InputGroupWrapper, InputGroupItem } from '@synerise/ds-input/dist/InputGroup.styles';
-import { FactorInput } from '../FactorValue/FactorValue.style'; // eslint-disable-next-line import/prefer-default-export
-
+import { FactorInput } from '../FactorValue/FactorValue.style';
 export var Group = styled(InputGroup).withConfig({
   displayName: "Factorsstyle__Group",
   componentId: "sc-1kkuis0-0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-factors",
-  "version": "0.26.3",
+  "version": "0.26.5",
   "description": "Factors UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,26 +34,26 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-autocomplete": "^0.8.23",
-    "@synerise/ds-badge": "^0.8.14",
-    "@synerise/ds-button": "^0.21.14",
-    "@synerise/ds-date-picker": "^0.12.1",
-    "@synerise/ds-date-range-picker": "^0.30.3",
-    "@synerise/ds-dropdown": "^0.18.19",
-    "@synerise/ds-icon": "^0.66.0",
-    "@synerise/ds-information-card": "^0.5.15",
-    "@synerise/ds-inline-edit": "^0.8.15",
-    "@synerise/ds-input": "^0.24.9",
-    "@synerise/ds-input-number": "^0.10.10",
-    "@synerise/ds-list-item": "^0.4.14",
-    "@synerise/ds-menu": "^0.20.1",
-    "@synerise/ds-modal": "^0.17.46",
-    "@synerise/ds-result": "^0.7.9",
-    "@synerise/ds-scrollbar": "^0.11.14",
-    "@synerise/ds-skeleton": "^0.6.13",
-    "@synerise/ds-tabs": "^0.17.2",
-    "@synerise/ds-tooltip": "^0.14.44",
-    "@synerise/ds-utils": "^0.30.0",
+    "@synerise/ds-autocomplete": "^0.8.25",
+    "@synerise/ds-badge": "^0.8.16",
+    "@synerise/ds-button": "^0.21.16",
+    "@synerise/ds-date-picker": "^0.12.3",
+    "@synerise/ds-date-range-picker": "^0.30.5",
+    "@synerise/ds-dropdown": "^0.18.21",
+    "@synerise/ds-icon": "^0.66.2",
+    "@synerise/ds-information-card": "^0.5.17",
+    "@synerise/ds-inline-edit": "^0.8.17",
+    "@synerise/ds-input": "^0.24.11",
+    "@synerise/ds-input-number": "^0.10.12",
+    "@synerise/ds-list-item": "^0.4.16",
+    "@synerise/ds-menu": "^0.20.3",
+    "@synerise/ds-modal": "^0.17.48",
+    "@synerise/ds-result": "^0.7.11",
+    "@synerise/ds-scrollbar": "^0.11.16",
+    "@synerise/ds-skeleton": "^0.6.15",
+    "@synerise/ds-tabs": "^0.17.4",
+    "@synerise/ds-tooltip": "^0.14.46",
+    "@synerise/ds-utils": "^0.30.2",
     "lodash": "^4.17.21",
     "react-intl": "3.12.0",
     "react-window": "1.8.5",
@@ -65,5 +65,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "b610a511939303ea269e5a89bf943aeec0b15723"
+  "gitHead": "c9eddd944cd2f08cb02db807652ba7fb2b536a1c"
 }