@synerise/ds-operators 0.10.60 → 0.10.62

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.10.62](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@0.10.61...@synerise/ds-operators@0.10.62) (2024-03-29)
+
+
+### Bug Fixes
+
+* **operators:** lock dropdown height to longest tab ([6c6ba6f](https://github.com/Synerise/synerise-design/commit/6c6ba6fbf7517f9754730427b9520c2aacaad6ea))
+
+
+
+
+
+## [0.10.61](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@0.10.60...@synerise/ds-operators@0.10.61) (2024-03-20)
+
+**Note:** Version bump only for package @synerise/ds-operators
+
+
+
+
+
 ## [0.10.60](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@0.10.59...@synerise/ds-operators@0.10.60) (2024-03-18)
 
 **Note:** Version bump only for package @synerise/ds-operators

package/dist/Operators.style.d.ts

@@ -1,7 +1,9 @@
 import Menu from '@synerise/ds-menu';
 export declare const TabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemsList: import("styled-components").StyledComponent<typeof Menu, any, {}, never>;
+export declare const ItemsList: import("styled-components").StyledComponent<typeof Menu, any, {
+    contentHeight?: number | undefined;
+}, never>;
 export declare const SearchResult: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SearchResultHighlight: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Operators.style.js

@@ -11,7 +11,9 @@ export var ContentPlaceholder = styled.div.withConfig({
 export var ItemsList = styled(Menu).withConfig({
   displayName: "Operatorsstyle__ItemsList",
   componentId: "vzf1ol-2"
-})(["width:100%;"]);
+})(["width:100%;", ""], function (props) {
+  return props.contentHeight !== undefined && "height: " + props.contentHeight + "px;";
+});
 export var SearchResult = styled.span.withConfig({
   displayName: "Operatorsstyle__SearchResult",
   componentId: "vzf1ol-3"

package/dist/OperatorsDropdown/OperatorsDropdown.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { OperatorsDropdownProps } from '../Operator.types';
-declare const OperatorsDropdown: React.FC<OperatorsDropdownProps>;
+declare const OperatorsDropdown: ({ texts, setSelected, groups, items, setDropdownVisible, value, }: OperatorsDropdownProps) => JSX.Element;
 export default OperatorsDropdown;

package/dist/OperatorsDropdown/OperatorsDropdown.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect, useCallback, useRef, useState, useMemo } from 'react';
 import { v4 as uuid } from 'uuid';
 import Dropdown from '@synerise/ds-dropdown';
 import Icon, { SearchM } from '@synerise/ds-icon';
@@ -8,8 +8,10 @@ import Result from '@synerise/ds-result';
 import Scrollbar from '@synerise/ds-scrollbar';
 import { theme } from '@synerise/ds-core';
 import OperatorsDropdownItem from './OperatorsDropdownItem';
+import OperatorsDropdownGroupName from './OperatorsDropdownGroupName';
 import * as S from '../Operators.style';
-var NO_GROUP_NAME = 'NO_GROUP_NAME';
+import { calculateGroupHeight, groupByGroupName } from '../utils';
+import { NO_GROUP_NAME, SCROLLABLE_HEIGHT, TABS_HEIGHT, PADDING, DEFAULT_TAB_INDEX } from '../constants';
 
 var OperatorsDropdown = function OperatorsDropdown(_ref) {
   var texts = _ref.texts,
@@ -18,56 +20,49 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
       items = _ref.items,
       setDropdownVisible = _ref.setDropdownVisible,
       value = _ref.value;
-  var overlayRef = React.useRef(null);
+  var overlayRef = useRef(null);
 
-  var _React$useState = React.useState(''),
-      searchQuery = _React$useState[0],
-      setSearchQuery = _React$useState[1];
+  var _useState = useState(''),
+      searchQuery = _useState[0],
+      setSearchQuery = _useState[1];
 
-  var _React$useState2 = React.useState(0),
-      activeTab = _React$useState2[0],
-      setActiveTab = _React$useState2[1];
+  var _useState2 = useState(DEFAULT_TAB_INDEX),
+      activeTab = _useState2[0],
+      setActiveTab = _useState2[1];
 
-  var _React$useState3 = React.useState(undefined),
-      activeGroup = _React$useState3[0],
-      setActiveGroup = _React$useState3[1];
+  var _useState3 = useState(undefined),
+      activeGroup = _useState3[0],
+      setActiveGroup = _useState3[1];
 
-  var _React$useState4 = React.useState(true),
-      searchInputCanBeFocused = _React$useState4[0],
-      setSearchInputFocus = _React$useState4[1];
+  var _useState4 = useState(true),
+      searchInputCanBeFocused = _useState4[0],
+      setSearchInputFocus = _useState4[1];
 
-  React.useEffect(function () {
+  useEffect(function () {
     var defaultIndex = groups == null ? void 0 : groups.findIndex(function (group) {
       return group.defaultGroup || value && group.id === value.groupId;
     });
-    setActiveTab(defaultIndex === -1 ? 0 : defaultIndex);
+    setActiveTab(defaultIndex === -1 ? DEFAULT_TAB_INDEX : defaultIndex);
   }, [groups, value]);
-  var classNames = React.useMemo(function () {
+  var classNames = useMemo(function () {
     return "ds-operator-item ds-operator-item-" + uuid();
   }, []);
   useOnClickOutside(overlayRef, function () {
     setDropdownVisible(false);
   });
-  var groupByGroupName = React.useCallback(function (activeItems) {
-    var itemsNumber = activeItems.length;
-    var groupedItems = {};
-
-    for (var i = 0; i < itemsNumber; i += 1) {
-      var item = activeItems[i];
-      var groupName = item.groupName || NO_GROUP_NAME;
-      var group = groupedItems[groupName] || [];
-      group.push(item);
-      groupedItems[groupName] = group;
-    }
-
-    var resultItems = [];
+  var renderGroupedItems = useCallback(function (activeItems) {
+    var groupedItems = groupByGroupName(activeItems);
+    var renderedItems = [];
     Object.keys(groupedItems).forEach(function (key) {
       if (key !== NO_GROUP_NAME) {
-        resultItems.push( /*#__PURE__*/React.createElement(S.Title, null, key));
+        renderedItems.push( /*#__PURE__*/React.createElement(OperatorsDropdownGroupName, {
+          "data-testid": "operator-group-title",
+          name: key
+        }));
       }
 
       groupedItems[key].forEach(function (item) {
-        resultItems.push( /*#__PURE__*/React.createElement(OperatorsDropdownItem, {
+        return renderedItems.push( /*#__PURE__*/React.createElement(OperatorsDropdownItem, {
           className: classNames,
           key: uuid(),
           item: item,
@@ -80,14 +75,14 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
         }));
       });
     });
-    return resultItems;
+    return renderedItems;
   }, [searchQuery, setDropdownVisible, setSelected, value, classNames]);
-  var currentTabItems = React.useMemo(function () {
+  var currentTabItems = useMemo(function () {
     return groups == null ? void 0 : groups.find(function (group, index) {
       return activeTab === index;
     });
   }, [groups, activeTab]);
-  var filteredItems = React.useMemo(function () {
+  var filteredItems = useMemo(function () {
     return items.filter(function (item) {
       return item.name.toLowerCase().includes(searchQuery.toLowerCase());
     }).map(function (item) {
@@ -107,7 +102,13 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
       });
     });
   }, [items, searchQuery, setDropdownVisible, setSelected, value, classNames]);
-  var currentItems = React.useMemo(function () {
+  var maxHeight = useMemo(function () {
+    return (groups == null ? void 0 : groups.reduce(function (currentMax, group) {
+      var groupHeight = calculateGroupHeight(group, items);
+      return Math.max(currentMax, groupHeight);
+    }, 0)) + 2 * PADDING;
+  }, [items, groups]);
+  var currentItems = useMemo(function () {
     if (searchQuery) {
       return filteredItems;
     }
@@ -129,27 +130,34 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
     }
 
     if (activeGroup != null && activeGroup.id) {
-      return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
+      return renderGroupedItems(items == null ? void 0 : items.filter(function (item) {
         return item.groupId === activeGroup.id;
       }));
     }
 
-    return groupByGroupName(items == null ? void 0 : items.filter(function (item) {
+    return renderGroupedItems(items == null ? void 0 : items.filter(function (item) {
       var _groups$activeTab;
 
       return item.groupId === ((_groups$activeTab = groups[activeTab]) == null ? void 0 : _groups$activeTab.id);
     }));
-  }, [currentTabItems, items, groups, searchQuery, activeTab, filteredItems, activeGroup, groupByGroupName, classNames]);
-  var handleSearch = React.useCallback(function (val) {
+  }, [currentTabItems, items, groups, searchQuery, activeTab, filteredItems, activeGroup, renderGroupedItems, classNames]);
+  var handleSearch = useCallback(function (val) {
     setSearchQuery(val);
   }, [setSearchQuery]);
-  var getTabs = React.useMemo(function () {
+  var getTabs = useMemo(function () {
     return (groups == null ? void 0 : groups.map(function (group) {
       return {
         icon: group.icon
       };
     })) || [];
   }, [groups]);
+  var hasTabs = getTabs.length > 1;
+  var lockedTabContentHeight;
+
+  if (hasTabs && maxHeight > 0) {
+    lockedTabContentHeight = Math.min(maxHeight, SCROLLABLE_HEIGHT) + (searchQuery ? TABS_HEIGHT : 0);
+  }
+
   return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
     style: {
       width: '300px',
@@ -176,7 +184,7 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
       component: /*#__PURE__*/React.createElement(SearchM, null),
       color: theme.palette['grey-600']
     })
-  }), searchQuery === '' && getTabs.length > 1 && /*#__PURE__*/React.createElement(S.TabsWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
+  }), searchQuery === '' && hasTabs && /*#__PURE__*/React.createElement(S.TabsWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
     block: true,
     tabs: getTabs,
     activeTab: activeTab,
@@ -184,14 +192,15 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
       setActiveTab(index);
       setActiveGroup(undefined);
     }
-  })), /*#__PURE__*/React.createElement(S.ItemsList, null, /*#__PURE__*/React.createElement(Scrollbar, {
+  })), /*#__PURE__*/React.createElement(S.ItemsList, {
+    contentHeight: lockedTabContentHeight
+  }, /*#__PURE__*/React.createElement(Scrollbar, {
     absolute: true,
-    maxHeight: 300,
+    maxHeight: lockedTabContentHeight,
     style: {
-      padding: 8
+      padding: PADDING
     }
-  }, // @ts-ignore
-  currentItems.length ? currentItems : /*#__PURE__*/React.createElement(Result, {
+  }, currentItems != null && currentItems.length ? currentItems : /*#__PURE__*/React.createElement(Result, {
     noSearchResults: true,
     type: "no-results",
     description: texts.noResults

package/dist/OperatorsDropdown/OperatorsDropdownGroupName.d.ts

@@ -0,0 +1,4 @@
+declare const OperatorsDropdownGroupName: ({ name }: {
+    name: string;
+}) => JSX.Element;
+export default OperatorsDropdownGroupName;

package/dist/OperatorsDropdown/OperatorsDropdownGroupName.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as S from '../Operators.style';
+
+var OperatorsDropdownGroupName = function OperatorsDropdownGroupName(_ref) {
+  var name = _ref.name;
+  return /*#__PURE__*/React.createElement(S.Title, {
+    "data-testid": "operator-group-title"
+  }, name);
+};
+
+export default OperatorsDropdownGroupName;

package/dist/OperatorsDropdown/OperatorsDropdownItem.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { OperatorsGroup, OperatorsItem } from '../Operator.types';
-interface Props {
+type OperatorsDropdownItemProps = {
     item: OperatorsItem | OperatorsGroup;
     searchQuery: string;
     clearSearch?: () => void;
@@ -8,6 +7,6 @@ interface Props {
     select: (item: OperatorsItem | OperatorsGroup) => void;
     selected?: boolean;
     className: string;
-}
-declare const OperatorsDropdownItem: React.FC<Props>;
+};
+declare const OperatorsDropdownItem: ({ item, clearSearch, searchQuery, hideDropdown, select, selected, className, }: OperatorsDropdownItemProps) => JSX.Element;
 export default OperatorsDropdownItem;

package/dist/OperatorsDropdown/OperatorsDropdownItem.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Icon, { CheckS } from '@synerise/ds-icon';
 import Menu from '@synerise/ds-menu';
 import { theme } from '@synerise/ds-core';
@@ -12,6 +12,7 @@ var OperatorsDropdownItem = function OperatorsDropdownItem(_ref) {
       selected = _ref.selected,
       className = _ref.className;
   return /*#__PURE__*/React.createElement(Menu.Item, {
+    // TODO change into listitem
     className: className,
     key: item.name + item.id,
     prefixel: searchQuery && /*#__PURE__*/React.createElement(Icon, {

package/dist/__specs__/data/Operators.data.d.ts

@@ -0,0 +1,41 @@
+export declare const OPERATORS_TEXTS: {
+    buttonLabel: string;
+    searchPlaceholder: string;
+    noResults: string;
+};
+export declare const OPERATORS_GROUPS: ({
+    id: string;
+    name: string;
+    temsType: null;
+    tooltip: string;
+    icon: JSX.Element;
+    defaultGroup: boolean;
+    itemsType?: undefined;
+} | {
+    id: string;
+    name: string;
+    itemsType: null;
+    tooltip: string;
+    icon: JSX.Element;
+    defaultGroup: boolean;
+    temsType?: undefined;
+})[];
+export declare const OPERATORS_ITEMS: ({
+    id: string;
+    value: string;
+    logic: string;
+    name: string;
+    groupId: string;
+    group: string;
+    icon: JSX.Element;
+    groupName?: undefined;
+} | {
+    id: string;
+    value: string;
+    logic: string;
+    name: string;
+    groupId: string;
+    group: string;
+    icon: JSX.Element;
+    groupName: string;
+})[];

package/dist/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const NO_GROUP_NAME = "NO_GROUP_NAME";
+export declare const SCROLLABLE_HEIGHT = 304;
+export declare const ITEM_HEIGHT = 32;
+export declare const TABS_HEIGHT = 50;
+export declare const PADDING = 8;
+export declare const DEFAULT_TAB_INDEX = 0;

package/dist/constants.js

@@ -0,0 +1,6 @@
+export var NO_GROUP_NAME = 'NO_GROUP_NAME';
+export var SCROLLABLE_HEIGHT = 304;
+export var ITEM_HEIGHT = 32;
+export var TABS_HEIGHT = 50;
+export var PADDING = 8;
+export var DEFAULT_TAB_INDEX = 0;

package/dist/utils/calculateGroupHeight.d.ts

@@ -0,0 +1,2 @@
+import { OperatorsGroup, OperatorsItem } from '../Operator.types';
+export declare const calculateGroupHeight: (group: OperatorsGroup, allItems: OperatorsItem[]) => number;

package/dist/utils/calculateGroupHeight.js

@@ -0,0 +1,16 @@
+import { ITEM_HEIGHT } from '../constants';
+export var calculateGroupHeight = function calculateGroupHeight(group, allItems) {
+  if (group.subGroups) {
+    var _group$subGroups;
+
+    return ((_group$subGroups = group.subGroups) == null ? void 0 : _group$subGroups.length) * ITEM_HEIGHT;
+  }
+
+  var groupItems = allItems.filter(function (item) {
+    return item.groupId === group.id;
+  });
+  var groupNames = new Set(groupItems.map(function (item) {
+    return item.groupName;
+  }).filter(Boolean));
+  return (groupItems.length + groupNames.size) * ITEM_HEIGHT;
+};

package/dist/utils/calculateGroupHeight.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/groupByGroupName.d.ts

@@ -0,0 +1,2 @@
+import { OperatorsItem } from '../Operator.types';
+export declare const groupByGroupName: (activeItems: OperatorsItem[]) => {};

package/dist/utils/groupByGroupName.js

@@ -0,0 +1,8 @@
+import { NO_GROUP_NAME } from '../constants';
+export var groupByGroupName = function groupByGroupName(activeItems) {
+  return activeItems.reduce(function (acc, item) {
+    var groupName = item.groupName || NO_GROUP_NAME;
+    acc[groupName] = [].concat(acc[groupName] || [], [item]);
+    return acc;
+  }, {});
+};

package/dist/utils/groupByGroupName.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './calculateGroupHeight';
+export * from './groupByGroupName';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from './calculateGroupHeight';
+export * from './groupByGroupName';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-operators",
-  "version": "0.10.60",
+  "version": "0.10.62",
   "description": "Operators UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,15 +33,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.19.3",
-    "@synerise/ds-dropdown": "^0.17.100",
-    "@synerise/ds-icon": "^0.60.3",
-    "@synerise/ds-menu": "^0.18.15",
-    "@synerise/ds-result": "^0.6.47",
-    "@synerise/ds-scrollbar": "^0.8.3",
-    "@synerise/ds-tabs": "^0.13.99",
-    "@synerise/ds-tooltip": "^0.14.20",
-    "@synerise/ds-utils": "^0.25.0",
+    "@synerise/ds-button": "^0.19.5",
+    "@synerise/ds-dropdown": "^0.17.102",
+    "@synerise/ds-icon": "^0.60.5",
+    "@synerise/ds-menu": "^0.18.17",
+    "@synerise/ds-result": "^0.6.49",
+    "@synerise/ds-scrollbar": "^0.10.0",
+    "@synerise/ds-tabs": "^0.13.101",
+    "@synerise/ds-tooltip": "^0.14.22",
+    "@synerise/ds-utils": "^0.26.1",
     "react-intl": "3.12.0",
     "uuid": "^8.3.2"
   },
@@ -55,5 +55,5 @@
     "@testing-library/react": "10.0.1",
     "@testing-library/user-event": "^10.3.1"
   },
-  "gitHead": "914ce4be2e0e1fe145edeca838ab04eaa1aec1bf"
+  "gitHead": "07304b7bf03826701df904c7be058d93588a9611"
 }