@synerise/ds-factors 0.22.30 → 0.23.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.23.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.22.30...@synerise/ds-factors@0.23.0) (2024-07-02)
+
+
+### Features
+
+* **factors:** swapped Menu.Item for ListItem ([8de560c](https://github.com/Synerise/synerise-design/commit/8de560ce5bb969ad9ccb0ca2b7249a14a5f5f356))
+
+
+
+
+
 ## [0.22.30](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.22.29...@synerise/ds-factors@0.22.30) (2024-06-27)
 
 **Note:** Version bump only for package @synerise/ds-factors

package/dist/FactorTypeSelector/FactorTypeSelector.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FactorTypeSelectorProps } from '../Factors.types';
-declare const FactorTypeSelector: React.FC<FactorTypeSelectorProps>;
+declare const FactorTypeSelector: ({ selectedFactorType, setSelectedFactorType, unavailableFactorTypes, availableFactorTypes, selectedFactor, texts, readOnly, }: FactorTypeSelectorProps) => React.JSX.Element;
 export default FactorTypeSelector;

package/dist/FactorTypeSelector/FactorTypeSelector.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React, { useMemo } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
 import Icon, { CheckS } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
-import Menu from '@synerise/ds-menu';
+import ListItem from '@synerise/ds-list-item';
 import { theme } from '@synerise/ds-core';
 import * as S from './FactorTypeSelector.styles';
 import { ALL_FACTOR_TYPES } from '../Factors.types';
@@ -16,7 +16,7 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
       selectedFactor = _ref.selectedFactor,
       texts = _ref.texts,
       readOnly = _ref.readOnly;
-  var typesList = React.useMemo(function () {
+  var typesList = useMemo(function () {
     var list = availableFactorTypes || ALL_FACTOR_TYPES;
 
     if (unavailableFactorTypes !== undefined) {
@@ -26,7 +26,7 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
     }
 
     return list.map(function (type) {
-      return /*#__PURE__*/React.createElement(Menu.Item, {
+      return /*#__PURE__*/React.createElement(ListItem, {
         className: "ds-factor-type",
         key: factorTypes[type].name,
         prefixel: /*#__PURE__*/React.createElement(Icon, {

package/dist/FactorTypeSelector/FactorTypeSelector.styles.d.ts

@@ -1,4 +1,3 @@
-import Menu from '@synerise/ds-menu';
 import Button from '@synerise/ds-button';
-export declare const FactorTypeList: import("styled-components").StyledComponent<typeof Menu, any, {}, never>;
+export declare const FactorTypeList: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TriggerButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;

package/dist/FactorTypeSelector/FactorTypeSelector.styles.js

@@ -1,10 +1,11 @@
 import styled from 'styled-components';
-import Menu from '@synerise/ds-menu';
 import Button from '@synerise/ds-button';
-export var FactorTypeList = styled(Menu).withConfig({
+export var FactorTypeList = styled.div.withConfig({
   displayName: "FactorTypeSelectorstyles__FactorTypeList",
   componentId: "sc-15cv997-0"
-})(["padding:8px;.ds-factor-type{padding:0;}"]);
+})(["padding:8px;background:", ";.ds-factor-type{padding:0;}"], function (props) {
+  return props.theme.palette.white;
+});
 export var TriggerButton = styled(Button).withConfig({
   displayName: "FactorTypeSelectorstyles__TriggerButton",
   componentId: "sc-15cv997-1"

package/dist/FactorValue/DynamicKey/DynamicKey.js

@@ -80,6 +80,7 @@ var DynamicKey = function DynamicKey(_ref) {
     readOnly: readOnly
   }));
   return /*#__PURE__*/React.createElement(S.DynamicKey, {
+    "data-testid": "ds-factors-dynamic-key",
     withoutTypeSelector: withoutTypeSelector
   }, trigger);
 };

package/dist/FactorValue/Formula/Formula.js

@@ -44,6 +44,7 @@ var FormulaInput = function FormulaInput(_ref) {
     return setOpenFormulaModal(true);
   } : undefined;
   return /*#__PURE__*/React.createElement(S.FormulaButton, {
+    "data-testid": "ds-factors-formula",
     withoutTypeSelector: withoutTypeSelector
   }, /*#__PURE__*/React.createElement(Button, {
     readOnly: readOnly,

package/dist/FactorValue/Parameter/Parameter.js

@@ -132,7 +132,8 @@ var ParameterInput = function ParameterInput(_ref) {
     }, getMenuEntryProps == null ? void 0 : getMenuEntryProps(parameter))]
   });
   return readOnly ? trigger : /*#__PURE__*/React.createElement("div", {
-    "data-popup-container": true
+    "data-popup-container": true,
+    "data-testid": "ds-factors-parameter"
   }, /*#__PURE__*/React.createElement(Dropdown, {
     visible: dropdownVisible,
     getPopupContainer: getPopupContainerOverride || getPopupContainer,

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

@@ -1,7 +1,8 @@
-import Menu from '@synerise/ds-menu';
+import { FixedSizeList } from 'react-window';
 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<"div", 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 Value: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledList: import("styled-components").StyledComponent<typeof FixedSizeList, any, {}, never>;

package/dist/FactorValue/Parameter/Parameter.style.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Menu from '@synerise/ds-menu';
+import { FixedSizeList } from 'react-window';
 export var TabsWrapper = styled.div.withConfig({
   displayName: "Parameterstyle__TabsWrapper",
   componentId: "u2uvgh-0"
@@ -8,10 +8,10 @@ export var ContentPlaceholder = styled.div.withConfig({
   displayName: "Parameterstyle__ContentPlaceholder",
   componentId: "u2uvgh-1"
 })(["height:100px;"]);
-export var ItemsList = styled(Menu).withConfig({
+export var ItemsList = styled.div.withConfig({
   displayName: "Parameterstyle__ItemsList",
   componentId: "u2uvgh-2"
-})(["width:100%;.ds-factors-parameter-list{height:auto !important;max-height:300px;}"]);
+})(["width:100%;"]);
 export var SearchResult = styled.span.withConfig({
   displayName: "Parameterstyle__SearchResult",
   componentId: "u2uvgh-3"
@@ -27,4 +27,8 @@ export var SearchResultHighlight = styled.span.withConfig({
 export var Value = styled.span.withConfig({
   displayName: "Parameterstyle__Value",
   componentId: "u2uvgh-5"
-})(["max-width:110px;text-overflow:ellipsis;overflow:hidden;"]);
+})(["max-width:110px;text-overflow:ellipsis;overflow:hidden;"]);
+export var StyledList = styled(FixedSizeList).withConfig({
+  displayName: "Parameterstyle__StyledList",
+  componentId: "u2uvgh-6"
+})(["overflowx:unset;overflowy:unset;height:auto !important;max-height:300px;"]);

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ParameterDropdownProps } from '../../Factors.types';
-declare const ParameterDropdown: React.FC<ParameterDropdownProps>;
+declare const ParameterDropdown: ({ setSelected, texts, groups, items, setDropdownVisible, loading, onFetchData, hasMoreItems, }: ParameterDropdownProps) => React.JSX.Element;
 export default ParameterDropdown;

package/dist/FactorValue/Parameter/ParameterDropdown.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || 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); }
 
-import * as React from 'react';
+import React, { createRef, useRef, useState, useMemo, useCallback } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
 import Icon, { SearchM } from '@synerise/ds-icon';
 import Tabs from '@synerise/ds-tabs';
@@ -10,9 +10,12 @@ import { theme } from '@synerise/ds-core';
 import Scrollbar from '@synerise/ds-scrollbar';
 import { v4 as uuid } from 'uuid';
 import DropdownSkeleton from '@synerise/ds-skeleton';
-import { FixedSizeList as List } from 'react-window';
 import * as S from './Parameter.style';
 import ParameterDropdownItem from './ParameterDropdownItem';
+var LIST_STYLE = {
+  overflowX: 'unset',
+  overflowY: 'unset'
+};
 
 var ParameterDropdown = function ParameterDropdown(_ref) {
   var setSelected = _ref.setSelected,
@@ -23,36 +26,32 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
       loading = _ref.loading,
       onFetchData = _ref.onFetchData,
       hasMoreItems = _ref.hasMoreItems;
-  var listRef = React.createRef();
-  var listStyle = {
-    overflowX: 'unset',
-    overflowY: 'unset'
-  };
-  var defaultTab = React.useMemo(function () {
+  var listRef = createRef();
+  var defaultTab = useMemo(function () {
     var defaultIndex = groups == null ? void 0 : groups.findIndex(function (group) {
       return group.defaultGroup;
     });
     return defaultIndex || 0;
   }, [groups]);
-  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(defaultTab),
-      activeTab = _React$useState2[0],
-      setActiveTab = _React$useState2[1];
+  var _useState2 = useState(defaultTab),
+      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];
 
-  var classNames = React.useMemo(function () {
+  var classNames = useMemo(function () {
     return "ds-parameter-item ds-parameter-item-" + uuid();
   }, []);
   useOnClickOutside(overlayRef, function (event) {
@@ -60,18 +59,18 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
       setDropdownVisible(false);
     }
   });
-  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 handleClearSearch = React.useCallback(function () {
+  var handleClearSearch = useCallback(function () {
     setSearchQuery('');
   }, []);
-  var handleHideDropdown = React.useCallback(function () {
+  var handleHideDropdown = useCallback(function () {
     setDropdownVisible(false);
   }, [setDropdownVisible]);
-  var filteredItems = React.useMemo(function () {
+  var filteredItems = useMemo(function () {
     return items == null ? void 0 : items.filter(function (item) {
       return item.name.toLowerCase().includes(searchQuery.toLowerCase());
     }).map(function (item) {
@@ -85,7 +84,7 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
       };
     });
   }, [items, searchQuery, classNames, handleClearSearch, handleHideDropdown, setSelected]);
-  var currentItems = React.useMemo(function () {
+  var currentItems = useMemo(function () {
     if (searchQuery) {
       return filteredItems;
     }
@@ -143,10 +142,10 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
       };
     });
   }, [searchQuery, currentTabItems, activeGroup, groups, items, filteredItems, classNames, handleHideDropdown, setSelected, activeTab]);
-  var handleSearch = React.useCallback(function (value) {
+  var handleSearch = useCallback(function (value) {
     setSearchQuery(value);
   }, [setSearchQuery]);
-  var getTabs = React.useMemo(function () {
+  var getTabs = useMemo(function () {
     return (groups == null ? void 0 : groups.map(function (group) {
       return {
         label: group.name,
@@ -154,7 +153,7 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
       };
     })) || [];
   }, [groups]);
-  var getNoResultContainer = React.useMemo(function () {
+  var getNoResultContainer = useMemo(function () {
     return /*#__PURE__*/React.createElement(Result, {
       noSearchResults: true,
       type: "no-results",
@@ -220,13 +219,12 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
     hasMore: hasMoreItems,
     onYReachEnd: onFetchData,
     onScroll: handleScroll
-  }, /*#__PURE__*/React.createElement(List, {
-    className: "ds-factors-parameter-list",
+  }, /*#__PURE__*/React.createElement(S.StyledList, {
     width: "100%",
     height: 300,
     itemCount: currentItems.length,
     itemSize: 32,
-    style: listStyle,
+    style: LIST_STYLE,
     ref: listRef
   }, function (_ref3) {
     var index = _ref3.index,

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { CSSProperties } from 'react';
 import { ParameterGroup, ParameterItem } from '../../Factors.types';
 export type DropdownItem = {
     item: ParameterItem | ParameterGroup;
@@ -7,7 +7,7 @@ export type DropdownItem = {
     hideDropdown?: () => void;
     select: (item: ParameterItem | ParameterGroup) => void;
     className: string;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 };
-declare const ParameterDropdownItem: React.FC<DropdownItem>;
+declare const ParameterDropdownItem: ({ item, clearSearch, searchQuery, hideDropdown, select, className, style, }: DropdownItem) => React.JSX.Element;
 export default ParameterDropdownItem;

package/dist/FactorValue/Parameter/ParameterDropdownItem.js

@@ -4,9 +4,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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 * as React from 'react';
+import React from 'react';
 import Icon from '@synerise/ds-icon';
-import Menu from '@synerise/ds-menu';
+import ListItem from '@synerise/ds-list-item';
 
 var ParameterDropdownItem = function ParameterDropdownItem(_ref) {
   var item = _ref.item,
@@ -21,7 +21,7 @@ var ParameterDropdownItem = function ParameterDropdownItem(_ref) {
       _ = item.icon,
       itemProps = _objectWithoutPropertiesLoose(item, _excluded);
 
-  return /*#__PURE__*/React.createElement(Menu.Item, _extends({}, itemProps, {
+  return /*#__PURE__*/React.createElement(ListItem, _extends({}, itemProps, {
     style: style,
     className: className,
     key: item.name + item.id,

package/dist/FactorValue/Text/Text.js

@@ -117,7 +117,7 @@ var TextInput = function TextInput(_ref) {
       })));
     }
 
-    return /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, {
       handleInputRef: setInputRef,
       placeholder: texts.valuePlaceholder,
       icon1: /*#__PURE__*/React.createElement(S.IconWrapper, {
@@ -125,7 +125,9 @@ var TextInput = function TextInput(_ref) {
           return setOpenExpanseEditor(true);
         }
       }, !readOnly && /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(FullScreenM, null),
+        component: /*#__PURE__*/React.createElement(FullScreenM, {
+          "data-testid": "ds-factors-expansible-icon"
+        }),
         color: theme.palette['grey-600']
       })),
       value: localValue,
@@ -133,18 +135,20 @@ var TextInput = function TextInput(_ref) {
       onBlur: onDeactivate,
       error: localError || error,
       readOnly: readOnly
-    })));
+    }))), /*#__PURE__*/React.createElement(TextModal, {
+      visible: openExpanseEditor,
+      onCancel: function onCancel() {
+        return setOpenExpanseEditor(false);
+      },
+      value: localValue,
+      onApply: handleApply,
+      texts: texts
+    }));
   };
 
-  return /*#__PURE__*/React.createElement(S.TextWrapper, null, renderInput(textType, factorType), /*#__PURE__*/React.createElement(TextModal, {
-    visible: openExpanseEditor,
-    onCancel: function onCancel() {
-      return setOpenExpanseEditor(false);
-    },
-    value: localValue,
-    onApply: handleApply,
-    texts: texts
-  }));
+  return /*#__PURE__*/React.createElement(S.TextWrapper, {
+    "data-testid": "ds-factors-" + factorType + "-" + textType
+  }, renderInput(textType, factorType));
 };
 
 export default TextInput;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export { default } from './Factors';
+export { default, factorTypes } from './Factors';
+export { ALL_FACTOR_TYPES } from './Factors.types';
 export type { FactorsProps, ParameterValueType, InputProps } from './Factors.types';

package/dist/index.js

@@ -1 +1,2 @@
-export { default } from './Factors';
+export { default, factorTypes } from './Factors';
+export { ALL_FACTOR_TYPES } from './Factors.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-factors",
-  "version": "0.22.30",
+  "version": "0.23.0",
   "description": "Factors UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,23 +33,23 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-autocomplete": "^0.8.6",
+    "@synerise/ds-autocomplete": "^0.8.7",
     "@synerise/ds-badge": "^0.7.1",
     "@synerise/ds-button": "^0.21.1",
-    "@synerise/ds-date-picker": "^0.11.4",
-    "@synerise/ds-date-range-picker": "^0.28.8",
-    "@synerise/ds-dropdown": "^0.18.2",
+    "@synerise/ds-date-picker": "^0.11.5",
+    "@synerise/ds-date-range-picker": "^0.29.0",
+    "@synerise/ds-dropdown": "^0.18.3",
     "@synerise/ds-icon": "^0.63.0",
-    "@synerise/ds-information-card": "^0.4.11",
-    "@synerise/ds-inline-edit": "^0.7.12",
-    "@synerise/ds-input": "^0.22.1",
-    "@synerise/ds-input-number": "^0.9.21",
+    "@synerise/ds-information-card": "^0.4.12",
+    "@synerise/ds-inline-edit": "^0.7.13",
+    "@synerise/ds-input": "^0.23.0",
+    "@synerise/ds-input-number": "^0.9.22",
     "@synerise/ds-menu": "^0.19.3",
     "@synerise/ds-modal": "^0.17.32",
     "@synerise/ds-result": "^0.6.58",
     "@synerise/ds-scrollbar": "^0.11.2",
     "@synerise/ds-skeleton": "^0.6.1",
-    "@synerise/ds-tabs": "^0.14.6",
+    "@synerise/ds-tabs": "^0.14.7",
     "@synerise/ds-tooltip": "^0.14.31",
     "@synerise/ds-utils": "^0.27.0",
     "lodash": "^4.17.19",
@@ -67,5 +67,5 @@
     "@testing-library/react": "10.0.1",
     "@testing-library/user-event": "^10.3.1"
   },
-  "gitHead": "587eb113074985ae21e4f0c25ec33c3e3e2e072b"
+  "gitHead": "0692552b018dc9c8042f18c773f88890c9ad3270"
 }