@synerise/ds-operators 1.1.22 → 1.1.24

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@1.1.23...@synerise/ds-operators@1.1.24) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-operators
+
+## [1.1.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@1.1.22...@synerise/ds-operators@1.1.23) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-operators
+
 ## [1.1.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@1.1.21...@synerise/ds-operators@1.1.22) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-operators

package/README.md

@@ -80,16 +80,18 @@ import Operators from '@synerise/ds-operators'
 
 | Property                  | Description                                                | Type                                                       | Default   |
 | ------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- | --------- |
-| error                     | error validation                                           | boolean                                                    | -         |
-| getPopupContainerOverride | Popup container function for child tooltips and dropdowns  | (trigger: HTMLElement \ null) => HTMLElement;              | -         |
-| groups                    | Groups of operators                                        | OperatorsGroup[]                                           | []        |
-| items                     | Array of operators                                         | OperatorsItem[]                                            | []        |
-| onActivate                | Callback called when user opens dropdown                   | (fieldType: string) => void                                | -         |
-| onChange                  | Callback called when user selects operator                 | (item: OperatorsItem \ OperatorsGroup \ undefined) => void | -         |
-| onDeactivate              | Callback called when user closes dropdown                  | () => void                                                 | -         |
-| opened                    | Whether if dropdown should opens from outside of component | boolean                                                    | false     |
-| texts                     | Translations object                                        | OperatorTexts                                              | -         |
-| value                     | Selected operator                                          | OperatorsItem \ undefined                                  | undefined |
+| errorText                 | Puts the trigger button in error state                     | ReactNode                                     | -         |
+| getPopupContainerOverride | Popup container function for child tooltips and dropdowns  | (trigger: HTMLElement \| null) => HTMLElement | -         |
+| groups                    | Groups of operators                                        | OperatorsGroup[]                              | -         |
+| items                     | Array of operators                                         | OperatorsItem[]                               | -         |
+| onActivate                | Callback called when user opens dropdown                   | () => void                                    | -         |
+| onChange                  | Callback called when user selects operator                 | (item: OperatorsItem \| undefined) => void    | -         |
+| onDeactivate              | Callback called when user closes dropdown                  | () => void                                    | -         |
+| opened                    | Whether if dropdown should opens from outside of component | boolean                                       | false     |
+| readOnly                  | Disables the dropdown; shows selected value without arrow  | boolean                                       | false     |
+| texts                     | Translations object                                        | Partial\<OperatorTexts\>                      | -         |
+| value                     | Selected operator                                          | OperatorsItem \| undefined                    | undefined |
+| dropdownDimensionsConfig  | Override responsive height thresholds                      | `{ defaultHeight?, lowerHeight?, threshold? }`| -         |
 
 ### OperatorsGroup
 

package/dist/Operator.types.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type ReactText } from 'react';
+import { ReactNode, ReactText } from 'react';
 export type OperatorTexts = {
     buttonLabel: string;
     searchPlaceholder: string;

package/dist/Operator.types.js

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

package/dist/Operators.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type OperatorsProps } from './Operator.types';
+import { default as React } from 'react';
+import { OperatorsProps } from './Operator.types';
 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

@@ -1,125 +1,95 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
-import Button from '@synerise/ds-button';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { AngleDownS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { getPopupContainer } from '@synerise/ds-utils';
-import * as S from './Operators.style';
-import OperatorsDropdown from './OperatorsDropdown/OperatorsDropdown';
-import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from './constants';
-var isOperatorItem = function isOperatorItem(item) {
-  return 'groupId' in item;
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useIntl } from "react-intl";
+import Button from "@synerise/ds-button";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { AngleDownS } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { getPopupContainer } from "@synerise/ds-utils";
+import { Value } from "./Operators.style.js";
+import OperatorsDropdown from "./OperatorsDropdown/OperatorsDropdown.js";
+import { DROPDOWN_HEIGHT, DROPDOWN_HEIGHT_BELOW_THRESHOLD, DROPDOWN_HEIGHT_THRESHOLD } from "./constants.js";
+const isOperatorItem = (item) => {
+  return "groupId" in item;
 };
-var Operators = function Operators(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    groups = _ref.groups,
-    items = _ref.items,
-    texts = _ref.texts,
-    opened = _ref.opened,
-    getPopupContainerOverride = _ref.getPopupContainerOverride,
-    onActivate = _ref.onActivate,
-    onDeactivate = _ref.onDeactivate,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    errorText = _ref.errorText,
-    dropdownDimensionsConfig = _ref.dropdownDimensionsConfig;
-  var dimensionsConfig = _extends({
+const Operators = ({
+  value,
+  onChange,
+  groups,
+  items,
+  texts,
+  opened,
+  getPopupContainerOverride,
+  onActivate,
+  onDeactivate,
+  readOnly = false,
+  errorText,
+  dropdownDimensionsConfig
+}) => {
+  const dimensionsConfig = {
     defaultHeight: DROPDOWN_HEIGHT,
     lowerHeight: DROPDOWN_HEIGHT_BELOW_THRESHOLD,
-    threshold: DROPDOWN_HEIGHT_THRESHOLD
-  }, dropdownDimensionsConfig);
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var _useState = useState(false),
-    dropdownVisible = _useState[0],
-    setDropdownVisible = _useState[1];
-  var _useState2 = useState(dimensionsConfig.defaultHeight),
-    outerHeight = _useState2[0],
-    setOuterHeight = _useState2[1];
-  var text = useMemo(function () {
-    return _extends({
-      buttonLabel: formatMessage({
-        id: 'DS.OPERATORS.BUTTON_LABEL',
-        defaultMessage: 'Choose'
-      }),
-      searchPlaceholder: formatMessage({
-        id: 'DS.OPERATORS.SEARCH_PLACEHOLDER',
-        defaultMessage: 'Search'
-      }),
-      noResults: formatMessage({
-        id: 'DS.OPERATORS.NO_RESULTS',
-        defaultMessage: 'No results'
-      })
-    }, texts);
-  }, [texts, formatMessage]);
-  var handleChange = useCallback(function (val) {
+    threshold: DROPDOWN_HEIGHT_THRESHOLD,
+    ...dropdownDimensionsConfig
+  };
+  const {
+    formatMessage
+  } = useIntl();
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [outerHeight, setOuterHeight] = useState(dimensionsConfig.defaultHeight);
+  const text = useMemo(() => ({
+    buttonLabel: formatMessage({
+      id: "DS.OPERATORS.BUTTON_LABEL",
+      defaultMessage: "Choose"
+    }),
+    searchPlaceholder: formatMessage({
+      id: "DS.OPERATORS.SEARCH_PLACEHOLDER",
+      defaultMessage: "Search"
+    }),
+    noResults: formatMessage({
+      id: "DS.OPERATORS.NO_RESULTS",
+      defaultMessage: "No results"
+    }),
+    ...texts
+  }), [texts, formatMessage]);
+  const handleChange = useCallback((val) => {
     (!val || isOperatorItem(val)) && onChange(val);
   }, [onChange]);
-  useEffect(function () {
+  useEffect(() => {
     setDropdownVisible(Boolean(opened));
   }, [opened]);
-  var handleClick = useCallback(function () {
-    onActivate == null || onActivate();
+  const handleClick = useCallback(() => {
+    onActivate?.();
   }, [onActivate]);
-  var onDropdownVisibilityChange = useCallback(function (newValue) {
+  const onDropdownVisibilityChange = useCallback((newValue) => {
     setDropdownVisible(newValue);
-    newValue && (onActivate == null ? void 0 : onActivate());
+    newValue && onActivate?.();
   }, [onActivate]);
-  var triggerMode = useMemo(function () {
+  const triggerMode = useMemo(() => {
     if (value) {
-      return readOnly ? 'icon-label' : 'two-icons';
+      return readOnly ? "icon-label" : "two-icons";
     }
-    return readOnly ? 'simple' : 'label-icon';
+    return readOnly ? "simple" : "label-icon";
   }, [value, readOnly]);
-  var dropdownTrigger = /*#__PURE__*/React.createElement(Tooltip, {
-    getPopupContainer: getPopupContainerOverride || getPopupContainer,
-    title: (value == null ? void 0 : value.name) || '',
-    trigger: ['hover']
-  }, /*#__PURE__*/React.createElement(Button, {
-    error: Boolean(errorText),
-    type: "secondary",
-    mode: triggerMode,
-    onClick: !readOnly ? handleClick : undefined,
-    readOnly: readOnly
-  }, value && /*#__PURE__*/React.createElement(Icon, {
-    component: value.icon
-  }), /*#__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);
-    };
+  const dropdownTrigger = /* @__PURE__ */ jsx(Tooltip, { getPopupContainer: getPopupContainerOverride || getPopupContainer, title: value?.name || "", trigger: ["hover"], children: /* @__PURE__ */ jsxs(Button, { error: Boolean(errorText), type: "secondary", mode: triggerMode, onClick: !readOnly ? handleClick : void 0, readOnly, children: [
+    value && /* @__PURE__ */ jsx(Icon, { component: value.icon }),
+    /* @__PURE__ */ jsx(Value, { children: value ? value.name : text.buttonLabel }),
+    !readOnly && /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}) })
+  ] }) });
+  useEffect(() => {
+    const checkViewportHeight = () => setOuterHeight(window.innerHeight < dimensionsConfig.threshold ? dimensionsConfig.lowerHeight : dimensionsConfig.defaultHeight);
     checkViewportHeight();
-    window.addEventListener('resize', checkViewportHeight);
-    return function () {
-      window.removeEventListener('resize', checkViewportHeight);
+    window.addEventListener("resize", checkViewportHeight);
+    return () => {
+      window.removeEventListener("resize", checkViewportHeight);
     };
   }, [dimensionsConfig.defaultHeight, dimensionsConfig.lowerHeight, dimensionsConfig.threshold]);
-  var content = readOnly ? dropdownTrigger : /*#__PURE__*/React.createElement(Dropdown, {
-    open: dropdownVisible,
-    onOpenChange: onDropdownVisibilityChange,
-    getPopupContainer: getPopupContainerOverride || getPopupContainer,
-    asChild: false,
-    size: "medium",
-    onDismiss: onDeactivate,
-    popoverProps: {
-      testId: 'operators',
-      returnFocus: false
-    },
-    overlay: /*#__PURE__*/React.createElement(OperatorsDropdown, {
-      value: value,
-      setDropdownVisible: setDropdownVisible,
-      setSelected: handleChange,
-      groups: groups,
-      items: items,
-      texts: text,
-      outerHeight: outerHeight
-    })
-  }, dropdownTrigger);
+  const content = readOnly ? dropdownTrigger : /* @__PURE__ */ jsx(Dropdown, { open: dropdownVisible, onOpenChange: onDropdownVisibilityChange, getPopupContainer: getPopupContainerOverride || getPopupContainer, asChild: false, size: "medium", onDismiss: onDeactivate, popoverProps: {
+    testId: "operators",
+    returnFocus: false
+  }, overlay: /* @__PURE__ */ jsx(OperatorsDropdown, { value, setDropdownVisible, setSelected: handleChange, groups, items, texts: text, outerHeight }), children: dropdownTrigger });
   return content;
 };
-export default Operators;
+export {
+  Operators as default
+};

package/dist/Operators.style.d.ts

@@ -1,9 +1,9 @@
-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<"div", any, {
+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<"div", any, {
     contentHeight?: number;
 }, 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>;
-export declare const Value: import("styled-components").StyledComponent<"span", any, {}, 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>;
+export declare const Value: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/Operators.style.js

@@ -1,39 +1,38 @@
-import styled from 'styled-components';
-export var TabsWrapper = styled.div.withConfig({
+import styled from "styled-components";
+const TabsWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Operatorsstyle__TabsWrapper",
   componentId: "sc-vzf1ol-0"
 })(["width:100%;padding:0 0 8px 0;"]);
-export var ContentPlaceholder = styled.div.withConfig({
+const ContentPlaceholder = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Operatorsstyle__ContentPlaceholder",
   componentId: "sc-vzf1ol-1"
 })(["height:100px;"]);
-export var ItemsList = styled.div.withConfig({
+const ItemsList = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Operatorsstyle__ItemsList",
   componentId: "sc-vzf1ol-2"
-})(["width:100%;backgorund:", ";", ""], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.contentHeight !== undefined && "height: " + props.contentHeight + "px;";
-});
-export var SearchResult = styled.span.withConfig({
+})(["width:100%;backgorund:", ";", ""], (props) => props.theme.palette.white, (props) => props.contentHeight !== void 0 && `height: ${props.contentHeight}px;`);
+const SearchResult = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Operatorsstyle__SearchResult",
   componentId: "sc-vzf1ol-3"
-})(["font-weight:400;color:", ";"], function (props) {
-  return props.theme.palette['grey-500'];
-});
-export var SearchResultHighlight = styled.span.withConfig({
+})(["font-weight:400;color:", ";"], (props) => props.theme.palette["grey-500"]);
+const SearchResultHighlight = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Operatorsstyle__SearchResultHighlight",
   componentId: "sc-vzf1ol-4"
-})(["font-weight:500;color:", ";"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var Title = styled.div.withConfig({
+})(["font-weight:500;color:", ";"], (props) => props.theme.palette["grey-700"]);
+const Title = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Operatorsstyle__Title",
   componentId: "sc-vzf1ol-5"
-})(["font-size:10px;line-height:1.6;font-weight:500;text-transform:uppercase;color:", ";padding:8px 12px;"], function (props) {
-  return props.theme.palette['grey-500'];
-});
-export var Value = styled.span.withConfig({
+})(["font-size:10px;line-height:1.6;font-weight:500;text-transform:uppercase;color:", ";padding:8px 12px;"], (props) => props.theme.palette["grey-500"]);
+const Value = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Operatorsstyle__Value",
   componentId: "sc-vzf1ol-6"
-})(["max-width:100px;text-overflow:ellipsis;overflow:hidden;"]);
+})(["max-width:100px;text-overflow:ellipsis;overflow:hidden;"]);
+export {
+  ContentPlaceholder,
+  ItemsList,
+  SearchResult,
+  SearchResultHighlight,
+  TabsWrapper,
+  Title,
+  Value
+};

package/dist/OperatorsDropdown/OperatorsDropdown.d.ts

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

package/dist/OperatorsDropdown/OperatorsDropdown.js

@@ -1,186 +1,104 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import { theme } from '@synerise/ds-core';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { SearchM } from '@synerise/ds-icon';
-import Result from '@synerise/ds-result';
-import Scrollbar from '@synerise/ds-scrollbar';
-import Tabs from '@synerise/ds-tabs';
-import { focusWithArrowKeys } from '@synerise/ds-utils';
-import * as S from '../Operators.style';
-import { DEFAULT_TAB_INDEX, DROPDOWN_HEIGHT, NO_GROUP_NAME, PADDING, SEARCH_HEIGHT, TABS_HEIGHT } from '../constants';
-import { groupByGroupName } from '../utils';
-import OperatorsDropdownGroupName from './OperatorsDropdownGroupName';
-import OperatorsDropdownItem from './OperatorsDropdownItem';
-var OperatorsDropdown = function OperatorsDropdown(_ref) {
-  var texts = _ref.texts,
-    setSelected = _ref.setSelected,
-    groups = _ref.groups,
-    items = _ref.items,
-    setDropdownVisible = _ref.setDropdownVisible,
-    value = _ref.value,
-    _ref$outerHeight = _ref.outerHeight,
-    outerHeight = _ref$outerHeight === void 0 ? DROPDOWN_HEIGHT : _ref$outerHeight;
-  var overlayRef = useRef(null);
-  var _useState = useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  var _useState2 = useState(DEFAULT_TAB_INDEX),
-    activeTab = _useState2[0],
-    setActiveTab = _useState2[1];
-  var _useState3 = useState(undefined),
-    activeGroup = _useState3[0],
-    setActiveGroup = _useState3[1];
-  var _useState4 = useState(true),
-    searchInputCanBeFocused = _useState4[0],
-    setSearchInputFocus = _useState4[1];
-  useEffect(function () {
-    var defaultIndex = groups == null ? void 0 : groups.findIndex(function (group) {
-      return group.defaultGroup || value && group.id === value.groupId;
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { v4 } from "uuid";
+import { theme } from "@synerise/ds-core";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { SearchM } from "@synerise/ds-icon";
+import Result from "@synerise/ds-result";
+import Scrollbar from "@synerise/ds-scrollbar";
+import Tabs from "@synerise/ds-tabs";
+import { focusWithArrowKeys } from "@synerise/ds-utils";
+import { TabsWrapper, ItemsList } from "../Operators.style.js";
+import { DEFAULT_TAB_INDEX, NO_GROUP_NAME, DROPDOWN_HEIGHT, TABS_HEIGHT, SEARCH_HEIGHT, PADDING } from "../constants.js";
+import { groupByGroupName } from "../utils/groupByGroupName.js";
+import OperatorsDropdownGroupName from "./OperatorsDropdownGroupName.js";
+import OperatorsDropdownItem from "./OperatorsDropdownItem.js";
+const OperatorsDropdown = ({
+  texts,
+  setSelected,
+  groups,
+  items,
+  setDropdownVisible,
+  value,
+  outerHeight = DROPDOWN_HEIGHT
+}) => {
+  const overlayRef = useRef(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeTab, setActiveTab] = useState(DEFAULT_TAB_INDEX);
+  const [activeGroup, setActiveGroup] = useState(void 0);
+  const [searchInputCanBeFocused, setSearchInputFocus] = useState(true);
+  useEffect(() => {
+    const defaultIndex = groups?.findIndex((group) => group.defaultGroup || value && group.id === value.groupId);
     setActiveTab(defaultIndex === -1 ? DEFAULT_TAB_INDEX : defaultIndex);
   }, [groups, value]);
-  var classNames = useMemo(function () {
-    return "ds-operator-item ds-operator-item-" + uuid();
+  const classNames = useMemo(() => {
+    return `ds-operator-item ds-operator-item-${v4()}`;
   }, []);
-  var renderGroupedItems = useCallback(function (activeItems) {
-    var groupedItems = groupByGroupName(activeItems);
-    var renderedItems = [];
-    Object.keys(groupedItems).forEach(function (key) {
+  const renderGroupedItems = useCallback((activeItems) => {
+    const groupedItems = groupByGroupName(activeItems);
+    const renderedItems = [];
+    Object.keys(groupedItems).forEach((key) => {
       if (key !== NO_GROUP_NAME) {
-        renderedItems.push(/*#__PURE__*/React.createElement(OperatorsDropdownGroupName, {
-          "data-testid": "operator-group-title",
-          name: key
-        }));
+        renderedItems.push(/* @__PURE__ */ jsx(OperatorsDropdownGroupName, { "data-testid": "operator-group-title", name: key }));
       }
-      groupedItems[key].forEach(function (item) {
-        return renderedItems.push(/*#__PURE__*/React.createElement(OperatorsDropdownItem, {
-          className: classNames,
-          key: uuid(),
-          item: item,
-          searchQuery: searchQuery,
-          hideDropdown: function hideDropdown() {
-            return setDropdownVisible(false);
-          },
-          select: setSelected,
-          selected: Boolean(value) && item.id === (value == null ? void 0 : value.id)
-        }));
-      });
+      groupedItems[key].forEach((item) => renderedItems.push(/* @__PURE__ */ jsx(OperatorsDropdownItem, { className: classNames, item, searchQuery, hideDropdown: () => setDropdownVisible(false), select: setSelected, selected: Boolean(value) && item.id === value?.id }, v4())));
     });
     return renderedItems;
   }, [searchQuery, setDropdownVisible, setSelected, value, classNames]);
-  var currentTabItems = useMemo(function () {
-    return groups == null ? void 0 : groups.find(function (group, index) {
+  const currentTabItems = useMemo(() => {
+    return groups?.find((group, index) => {
       return activeTab === index;
     });
   }, [groups, activeTab]);
-  var filteredItems = useMemo(function () {
-    return items.filter(function (item) {
-      return item.name.toLowerCase().includes(searchQuery.toLowerCase());
-    }).map(function (item) {
-      return /*#__PURE__*/React.createElement(OperatorsDropdownItem, {
-        className: classNames,
-        key: item.name + item.groupId,
-        item: item,
-        searchQuery: searchQuery,
-        clearSearch: function clearSearch() {
-          return setSearchQuery('');
-        },
-        hideDropdown: function hideDropdown() {
-          return setDropdownVisible(false);
-        },
-        select: setSelected,
-        selected: Boolean(value) && item.id === (value == null ? void 0 : value.id)
-      });
-    });
-  }, [items, searchQuery, setDropdownVisible, setSelected, value, classNames]);
-  var currentItems = useMemo(function () {
+  const filteredItems = useMemo(() => items.filter((item) => item.name.toLowerCase().includes(searchQuery.toLowerCase())).map((item) => {
+    return /* @__PURE__ */ jsx(OperatorsDropdownItem, { className: classNames, item, searchQuery, clearSearch: () => setSearchQuery(""), hideDropdown: () => setDropdownVisible(false), select: setSelected, selected: Boolean(value) && item.id === value?.id }, item.name + item.groupId);
+  }), [items, searchQuery, setDropdownVisible, setSelected, value, classNames]);
+  const currentItems = useMemo(() => {
     if (searchQuery) {
       return filteredItems;
     }
-    var hasSubgroups = Boolean(currentTabItems == null ? void 0 : currentTabItems.subGroups);
+    const hasSubgroups = Boolean(currentTabItems?.subGroups);
     if (hasSubgroups && !activeGroup) {
-      var _currentTabItems$subG;
-      return currentTabItems == null || (_currentTabItems$subG = currentTabItems.subGroups) == null ? void 0 : _currentTabItems$subG.map(function (subGroup) {
-        return /*#__PURE__*/React.createElement(OperatorsDropdownItem, {
-          className: classNames,
-          key: subGroup.name + subGroup.id,
-          item: subGroup,
-          searchQuery: searchQuery,
-          select: setActiveGroup
-        });
+      return currentTabItems?.subGroups?.map((subGroup) => {
+        return /* @__PURE__ */ jsx(OperatorsDropdownItem, { className: classNames, item: subGroup, searchQuery, select: setActiveGroup }, subGroup.name + subGroup.id);
       });
     }
-    if (activeGroup != null && activeGroup.id) {
-      return renderGroupedItems(items == null ? void 0 : items.filter(function (item) {
-        return item.groupId === activeGroup.id;
-      }));
+    if (activeGroup?.id) {
+      return renderGroupedItems(items?.filter((item) => item.groupId === activeGroup.id));
     }
-    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);
-    }));
+    return renderGroupedItems(items?.filter((item) => item.groupId === groups[activeTab]?.id));
   }, [currentTabItems, items, groups, searchQuery, activeTab, filteredItems, activeGroup, renderGroupedItems, classNames]);
-  var handleSearch = useCallback(function (val) {
+  const handleSearch = useCallback((val) => {
     setSearchQuery(val);
   }, [setSearchQuery]);
-  var getTabs = useMemo(function () {
-    return (groups == null ? void 0 : groups.map(function (group) {
-      return {
-        icon: group.icon,
-        tooltip: group.tooltip
-      };
+  const getTabs = useMemo(() => {
+    return groups?.map((group) => ({
+      icon: group.icon,
+      tooltip: group.tooltip
     })) || [];
   }, [groups]);
-  var hasTabs = getTabs.length > 1;
-  var dropdownContentHeight = useMemo(function () {
+  const hasTabs = getTabs.length > 1;
+  const dropdownContentHeight = useMemo(() => {
     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: {
-      zIndex: 1005
-    },
-    ref: overlayRef,
-    onKeyDown: function onKeyDown(e) {
-      setSearchInputFocus(false);
-      searchQuery && focusWithArrowKeys(e, classNames.split(' ')[1], function () {
-        setSearchInputFocus(true);
-      });
-    }
-  }, /*#__PURE__*/React.createElement(Dropdown.SearchInput, {
-    onSearchChange: handleSearch,
-    onClearInput: function onClearInput() {
-      return handleSearch('');
-    },
-    placeholder: texts.searchPlaceholder,
-    value: searchQuery,
-    autofocus: !searchQuery || searchInputCanBeFocused,
-    autofocusDelay: 50,
-    iconLeft: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SearchM, null),
-      color: theme.palette['grey-600']
-    })
-  }), searchQuery === '' && hasTabs && /*#__PURE__*/React.createElement(S.TabsWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
-    block: true,
-    tabs: getTabs,
-    activeTab: activeTab,
-    handleTabClick: function handleTabClick(index) {
+  return /* @__PURE__ */ jsxs(Dropdown.Wrapper, { "data-testid": "ds-operators-dropdown-wrapper", style: {
+    zIndex: 1005
+  }, ref: overlayRef, onKeyDown: (e) => {
+    setSearchInputFocus(false);
+    searchQuery && focusWithArrowKeys(e, classNames.split(" ")[1], () => {
+      setSearchInputFocus(true);
+    });
+  }, children: [
+    /* @__PURE__ */ jsx(Dropdown.SearchInput, { onSearchChange: handleSearch, onClearInput: () => handleSearch(""), placeholder: texts.searchPlaceholder, value: searchQuery, autofocus: !searchQuery || searchInputCanBeFocused, autofocusDelay: 50, iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}), color: theme.palette["grey-600"] }) }),
+    searchQuery === "" && hasTabs && /* @__PURE__ */ jsx(TabsWrapper, { children: /* @__PURE__ */ jsx(Tabs, { block: true, tabs: getTabs, activeTab, handleTabClick: (index) => {
       setActiveTab(index);
-      setActiveGroup(undefined);
-    }
-  })), /*#__PURE__*/React.createElement(S.ItemsList, {
-    contentHeight: dropdownContentHeight
-  }, /*#__PURE__*/React.createElement(Scrollbar, {
-    absolute: true,
-    maxHeight: dropdownContentHeight,
-    style: {
+      setActiveGroup(void 0);
+    } }) }),
+    /* @__PURE__ */ jsx(ItemsList, { contentHeight: dropdownContentHeight, children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight: dropdownContentHeight, style: {
       padding: PADDING
-    }
-  }, currentItems != null && currentItems.length ? currentItems : /*#__PURE__*/React.createElement(Result, {
-    noSearchResults: true,
-    type: "no-results",
-    description: texts.noResults
-  }))));
+    }, children: currentItems?.length ? currentItems : /* @__PURE__ */ jsx(Result, { noSearchResults: true, type: "no-results", description: texts.noResults }) }) })
+  ] });
+};
+export {
+  OperatorsDropdown as default
 };
-export default OperatorsDropdown;

package/dist/OperatorsDropdown/OperatorsDropdownGroupName.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 declare const OperatorsDropdownGroupName: ({ name }: {
     name: string;
 }) => React.JSX.Element;

package/dist/OperatorsDropdown/OperatorsDropdownGroupName.js

@@ -1,9 +1,10 @@
-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);
+import { jsx } from "react/jsx-runtime";
+import { Title } from "../Operators.style.js";
+const OperatorsDropdownGroupName = ({
+  name
+}) => {
+  return /* @__PURE__ */ jsx(Title, { "data-testid": "operator-group-title", children: name });
+};
+export {
+  OperatorsDropdownGroupName as default
 };
-export default OperatorsDropdownGroupName;

package/dist/OperatorsDropdown/OperatorsDropdownItem.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type OperatorsGroup, type OperatorsItem } from '../Operator.types';
+import { default as React } from 'react';
+import { OperatorsGroup, OperatorsItem } from '../Operator.types';
 type OperatorsDropdownItemProps = {
     item: OperatorsItem | OperatorsGroup;
     searchQuery: string;

package/dist/OperatorsDropdown/OperatorsDropdownItem.js

@@ -1,31 +1,22 @@
-import React from 'react';
-import { theme } from '@synerise/ds-core';
-import Icon, { CheckS } from '@synerise/ds-icon';
-import ListItem from '@synerise/ds-list-item';
-var OperatorsDropdownItem = function OperatorsDropdownItem(_ref) {
-  var item = _ref.item,
-    clearSearch = _ref.clearSearch,
-    searchQuery = _ref.searchQuery,
-    hideDropdown = _ref.hideDropdown,
-    select = _ref.select,
-    selected = _ref.selected,
-    className = _ref.className;
-  return /*#__PURE__*/React.createElement(ListItem, {
-    className: className,
-    key: item.name + item.id,
-    prefixel: searchQuery && /*#__PURE__*/React.createElement(Icon, {
-      component: item.icon
-    }),
-    highlight: searchQuery,
-    suffixel: selected && /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(CheckS, null),
-      color: theme.palette['green-600']
-    }),
-    onClick: function onClick() {
-      clearSearch && clearSearch();
-      hideDropdown && hideDropdown();
-      select && select(item);
-    }
-  }, item.name);
+import { jsx } from "react/jsx-runtime";
+import { theme } from "@synerise/ds-core";
+import Icon, { CheckS } from "@synerise/ds-icon";
+import ListItem from "@synerise/ds-list-item";
+const OperatorsDropdownItem = ({
+  item,
+  clearSearch,
+  searchQuery,
+  hideDropdown,
+  select,
+  selected,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(ListItem, { className, prefixel: searchQuery && /* @__PURE__ */ jsx(Icon, { component: item.icon }), highlight: searchQuery, suffixel: selected && /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CheckS, {}), color: theme.palette["green-600"] }), onClick: () => {
+    clearSearch && clearSearch();
+    hideDropdown && hideDropdown();
+    select && select(item);
+  }, children: item.name }, item.name + item.id);
+};
+export {
+  OperatorsDropdownItem as default
 };
-export default OperatorsDropdownItem;

package/dist/constants.js

@@ -1,8 +1,18 @@
-export var NO_GROUP_NAME = 'NO_GROUP_NAME';
-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;
+const NO_GROUP_NAME = "NO_GROUP_NAME";
+const DROPDOWN_HEIGHT = 420;
+const DROPDOWN_HEIGHT_BELOW_THRESHOLD = 350;
+const DROPDOWN_HEIGHT_THRESHOLD = 900;
+const SEARCH_HEIGHT = 53;
+const TABS_HEIGHT = 50;
+const PADDING = 8;
+const DEFAULT_TAB_INDEX = 0;
+export {
+  DEFAULT_TAB_INDEX,
+  DROPDOWN_HEIGHT,
+  DROPDOWN_HEIGHT_BELOW_THRESHOLD,
+  DROPDOWN_HEIGHT_THRESHOLD,
+  NO_GROUP_NAME,
+  PADDING,
+  SEARCH_HEIGHT,
+  TABS_HEIGHT
+};

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Operators';
+import { default as default2 } from "./Operators.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/dist/utils/groupByGroupName.d.ts

@@ -1,4 +1,4 @@
-import { type OperatorsItem } from '../Operator.types';
+import { OperatorsItem } from '../Operator.types';
 type GroupedOperators = Record<string, OperatorsItem[]>;
 export declare const groupByGroupName: (activeItems: OperatorsItem[]) => GroupedOperators;
 export {};

package/dist/utils/groupByGroupName.js

@@ -1,8 +1,11 @@
-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]);
+import { NO_GROUP_NAME } from "../constants.js";
+const groupByGroupName = (activeItems) => {
+  return activeItems.reduce((acc, item) => {
+    const groupName = item.groupName || NO_GROUP_NAME;
+    acc[groupName] = [...acc[groupName] || [], item];
     return acc;
   }, {});
-};
+};
+export {
+  groupByGroupName
+};

package/dist/utils/index.js

@@ -1 +1,4 @@
-export * from './groupByGroupName';
+import { groupByGroupName } from "./groupByGroupName.js";
+export {
+  groupByGroupName
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-operators",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "description": "Operators UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,15 +35,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.16",
-    "@synerise/ds-dropdown": "^1.3.0",
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-list-item": "^1.4.8",
-    "@synerise/ds-result": "^1.0.47",
-    "@synerise/ds-scrollbar": "^1.2.15",
-    "@synerise/ds-tabs": "^1.1.22",
-    "@synerise/ds-tooltip": "^1.4.8",
-    "@synerise/ds-utils": "^1.6.0",
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-dropdown": "^1.3.2",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-list-item": "^1.4.10",
+    "@synerise/ds-result": "^1.0.49",
+    "@synerise/ds-scrollbar": "^1.2.17",
+    "@synerise/ds-tabs": "^1.1.24",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
@@ -52,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }

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

@@ -1,42 +0,0 @@
-import React from 'react';
-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: React.JSX.Element;
-    defaultGroup: boolean;
-    itemsType?: undefined;
-} | {
-    id: string;
-    name: string;
-    itemsType: null;
-    tooltip: string;
-    icon: React.JSX.Element;
-    defaultGroup: boolean;
-    temsType?: undefined;
-})[];
-export declare const OPERATORS_ITEMS: ({
-    id: string;
-    value: string;
-    logic: string;
-    name: string;
-    groupId: string;
-    group: string;
-    icon: React.JSX.Element;
-    groupName?: undefined;
-} | {
-    id: string;
-    value: string;
-    logic: string;
-    name: string;
-    groupId: string;
-    group: string;
-    icon: React.JSX.Element;
-    groupName: string;
-})[];

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

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