@synerise/ds-operators 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.13.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@0.12.2...@synerise/ds-operators@0.13.0) (2024-09-13)
+
+
+### Features
+
+* **tabs:** add tooltip prop ([798cd81](https://github.com/Synerise/synerise-design/commit/798cd819be1b2bd55883302da4cb1290278d1919))
+
+
+
+
+
+## [0.12.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@0.12.1...@synerise/ds-operators@0.12.2) (2024-09-11)
+
+
+### Bug Fixes
+
+* **factors:** make all dropdowns same fixed height ([40e86d1](https://github.com/Synerise/synerise-design/commit/40e86d183dddb925c2b75c499615c1455b93b7c4))
+
+
+
+
+
 ## [0.12.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@0.12.0...@synerise/ds-operators@0.12.1) (2024-09-03)
 
 **Note:** Version bump only for package @synerise/ds-operators

package/dist/Operator.types.d.ts

@@ -36,6 +36,11 @@ export type OperatorsProps = {
     getPopupContainerOverride?: (trigger: HTMLElement | null) => HTMLElement;
     readOnly?: boolean;
     errorText?: ReactNode;
+    dropdownDimensionsConfig?: {
+        defaultHeight?: number;
+        lowerHeight?: number;
+        threshold?: number;
+    };
 };
 export type OperatorsDropdownProps = {
     setDropdownVisible: (show: boolean) => void;
@@ -44,4 +49,5 @@ export type OperatorsDropdownProps = {
     items: OperatorsItem[];
     texts: OperatorTexts;
     value: OperatorsItem | undefined;
+    outerHeight?: number;
 };

package/dist/Operators.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { OperatorsProps } from './Operator.types';
-declare const Operators: React.FC<OperatorsProps>;
+declare const Operators: ({ value, onChange, groups, items, texts, opened, getPopupContainerOverride, onActivate, onDeactivate, readOnly, errorText, dropdownDimensionsConfig, }: OperatorsProps) => React.JSX.Element;
 export default Operators;

package/dist/Operators.js

@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-import * as React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@synerise/ds-button';
 import { getPopupContainer } from '@synerise/ds-utils';
@@ -13,6 +13,7 @@ import Dropdown from '@synerise/ds-dropdown';
 import Tooltip from '@synerise/ds-tooltip';
 import OperatorsDropdown from './OperatorsDropdown/OperatorsDropdown';
 import * as S from './Operators.style';
+import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from './constants';
 
 var Operators = function Operators(_ref) {
   var value = _ref.value,
@@ -26,16 +27,27 @@ var Operators = function Operators(_ref) {
       onDeactivate = _ref.onDeactivate,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      errorText = _ref.errorText;
+      errorText = _ref.errorText,
+      dropdownDimensionsConfig = _ref.dropdownDimensionsConfig;
+
+  var dimensionsConfig = _objectSpread({
+    defaultHeight: DROPDOWN_HEIGHT,
+    lowerHeight: DROPDOWN_HEIGHT_BELOW_THRESHOLD,
+    threshold: DROPDOWN_HEIGHT_THRESHOLD
+  }, dropdownDimensionsConfig);
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
 
-  var _React$useState = React.useState(false),
-      dropdownVisible = _React$useState[0],
-      setDropdownVisible = _React$useState[1];
+  var _useState = useState(false),
+      dropdownVisible = _useState[0],
+      setDropdownVisible = _useState[1];
+
+  var _useState2 = useState(dimensionsConfig.defaultHeight),
+      outerHeight = _useState2[0],
+      setOuterHeight = _useState2[1];
 
-  var text = React.useMemo(function () {
+  var text = useMemo(function () {
     return _objectSpread({
       buttonLabel: formatMessage({
         id: 'DS.OPERATORS.BUTTON_LABEL',
@@ -51,25 +63,25 @@ var Operators = function Operators(_ref) {
       })
     }, texts);
   }, [texts, formatMessage]);
-  var handleChange = React.useCallback(function (val) {
+  var handleChange = useCallback(function (val) {
     onChange(val);
   }, [onChange]);
-  React.useEffect(function () {
+  useEffect(function () {
     setDropdownVisible(Boolean(opened));
 
     if (opened) {
       onActivate && onActivate();
     }
   }, [onActivate, opened]);
-  var handleClick = React.useCallback(function () {
+  var handleClick = useCallback(function () {
     onActivate && onActivate();
     setDropdownVisible(true);
   }, [onActivate]);
-  var onDropdownVisibilityChange = React.useCallback(function (newValue) {
+  var onDropdownVisibilityChange = useCallback(function (newValue) {
     newValue && onActivate && onActivate();
     !newValue && onDeactivate && onDeactivate();
   }, [onActivate, onDeactivate]);
-  var triggerMode = React.useMemo(function () {
+  var triggerMode = useMemo(function () {
     if (value) {
       return readOnly ? 'icon-label' : 'two-icons';
     }
@@ -91,6 +103,17 @@ var Operators = function Operators(_ref) {
   }), /*#__PURE__*/React.createElement(S.Value, null, value ? value.name : text.buttonLabel), !readOnly && /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(AngleDownS, null)
   })));
+  useEffect(function () {
+    var checkViewportHeight = function checkViewportHeight() {
+      return setOuterHeight(window.innerHeight < dimensionsConfig.threshold ? dimensionsConfig.lowerHeight : dimensionsConfig.defaultHeight);
+    };
+
+    checkViewportHeight();
+    window.addEventListener('resize', checkViewportHeight);
+    return function () {
+      window.removeEventListener('resize', checkViewportHeight);
+    };
+  }, [dimensionsConfig.defaultHeight, dimensionsConfig.lowerHeight, dimensionsConfig.threshold]);
   var content = readOnly ? dropdownTrigger : /*#__PURE__*/React.createElement(Dropdown, {
     visible: dropdownVisible,
     onVisibleChange: onDropdownVisibilityChange,
@@ -101,7 +124,8 @@ var Operators = function Operators(_ref) {
       setSelected: handleChange,
       groups: groups,
       items: items,
-      texts: text
+      texts: text,
+      outerHeight: outerHeight
     })
   }, dropdownTrigger);
   return content;

package/dist/OperatorsDropdown/OperatorsDropdown.d.ts

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

package/dist/OperatorsDropdown/OperatorsDropdown.js

@@ -10,8 +10,8 @@ import { theme } from '@synerise/ds-core';
 import OperatorsDropdownItem from './OperatorsDropdownItem';
 import OperatorsDropdownGroupName from './OperatorsDropdownGroupName';
 import * as S from '../Operators.style';
-import { calculateGroupHeight, groupByGroupName } from '../utils';
-import { NO_GROUP_NAME, SCROLLABLE_HEIGHT, TABS_HEIGHT, PADDING, DEFAULT_TAB_INDEX } from '../constants';
+import { groupByGroupName } from '../utils';
+import { NO_GROUP_NAME, DROPDOWN_HEIGHT, TABS_HEIGHT, PADDING, DEFAULT_TAB_INDEX, SEARCH_HEIGHT } from '../constants';
 
 var OperatorsDropdown = function OperatorsDropdown(_ref) {
   var texts = _ref.texts,
@@ -19,7 +19,9 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
       groups = _ref.groups,
       items = _ref.items,
       setDropdownVisible = _ref.setDropdownVisible,
-      value = _ref.value;
+      value = _ref.value,
+      _ref$outerHeight = _ref.outerHeight,
+      outerHeight = _ref$outerHeight === void 0 ? DROPDOWN_HEIGHT : _ref$outerHeight;
   var overlayRef = useRef(null);
 
   var _useState = useState(''),
@@ -102,12 +104,6 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
       });
     });
   }, [items, searchQuery, setDropdownVisible, setSelected, value, classNames]);
-  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;
@@ -147,17 +143,15 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
   var getTabs = useMemo(function () {
     return (groups == null ? void 0 : groups.map(function (group) {
       return {
-        icon: group.icon
+        icon: group.icon,
+        tooltip: group.tooltip
       };
     })) || [];
   }, [groups]);
   var hasTabs = getTabs.length > 1;
-  var lockedTabContentHeight;
-
-  if (hasTabs && maxHeight > 0) {
-    lockedTabContentHeight = Math.min(maxHeight, SCROLLABLE_HEIGHT) + (searchQuery ? TABS_HEIGHT : 0);
-  }
-
+  var dropdownContentHeight = useMemo(function () {
+    return outerHeight - (!searchQuery && hasTabs ? TABS_HEIGHT : 0) - SEARCH_HEIGHT;
+  }, [hasTabs, searchQuery, outerHeight]);
   return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
     "data-testid": "ds-operators-dropdown-wrapper",
     style: {
@@ -194,10 +188,10 @@ var OperatorsDropdown = function OperatorsDropdown(_ref) {
       setActiveGroup(undefined);
     }
   })), /*#__PURE__*/React.createElement(S.ItemsList, {
-    contentHeight: lockedTabContentHeight
+    contentHeight: dropdownContentHeight
   }, /*#__PURE__*/React.createElement(Scrollbar, {
     absolute: true,
-    maxHeight: lockedTabContentHeight,
+    maxHeight: dropdownContentHeight,
     style: {
       padding: PADDING
     }

package/dist/constants.d.ts

@@ -1,6 +1,8 @@
 export declare const NO_GROUP_NAME = "NO_GROUP_NAME";
-export declare const SCROLLABLE_HEIGHT = 304;
-export declare const ITEM_HEIGHT = 32;
+export declare const DROPDOWN_HEIGHT = 420;
+export declare const DROPDOWN_HEIGHT_BELOW_THRESHOLD = 350;
+export declare const DROPDOWN_HEIGHT_THRESHOLD = 900;
+export declare const SEARCH_HEIGHT = 53;
 export declare const TABS_HEIGHT = 50;
 export declare const PADDING = 8;
 export declare const DEFAULT_TAB_INDEX = 0;

package/dist/constants.js

@@ -1,6 +1,8 @@
 export var NO_GROUP_NAME = 'NO_GROUP_NAME';
-export var SCROLLABLE_HEIGHT = 304;
-export var ITEM_HEIGHT = 32;
+export var DROPDOWN_HEIGHT = 420;
+export var DROPDOWN_HEIGHT_BELOW_THRESHOLD = 350;
+export var DROPDOWN_HEIGHT_THRESHOLD = 900;
+export var SEARCH_HEIGHT = 53;
 export var TABS_HEIGHT = 50;
 export var PADDING = 8;
 export var DEFAULT_TAB_INDEX = 0;

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-operators",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "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.21.8",
-    "@synerise/ds-dropdown": "^0.18.12",
-    "@synerise/ds-icon": "^0.65.3",
-    "@synerise/ds-list-item": "^0.4.8",
-    "@synerise/ds-result": "^0.7.2",
-    "@synerise/ds-scrollbar": "^0.11.8",
-    "@synerise/ds-tabs": "^0.15.5",
-    "@synerise/ds-tooltip": "^0.14.38",
-    "@synerise/ds-utils": "^0.29.0",
+    "@synerise/ds-button": "^0.21.10",
+    "@synerise/ds-dropdown": "^0.18.14",
+    "@synerise/ds-icon": "^0.65.5",
+    "@synerise/ds-list-item": "^0.4.10",
+    "@synerise/ds-result": "^0.7.4",
+    "@synerise/ds-scrollbar": "^0.11.10",
+    "@synerise/ds-tabs": "^0.16.0",
+    "@synerise/ds-tooltip": "^0.14.40",
+    "@synerise/ds-utils": "^0.29.2",
     "react-intl": "3.12.0",
     "uuid": "^8.3.2"
   },
@@ -50,5 +50,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "6fe94d574f25c5267c7593dec9399527f441b23a"
+  "gitHead": "6f3231e4a9e0720ffee61b748488cecd590da6e6"
 }

package/dist/utils/calculateGroupHeight.d.ts

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

package/dist/utils/calculateGroupHeight.js

@@ -1,16 +0,0 @@
-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

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