@synerise/ds-factors 1.5.20 → 1.6.0

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.
 
+# [1.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.5.21...@synerise/ds-factors@1.6.0) (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+
+
+
+
+
+## [1.5.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.5.20...@synerise/ds-factors@1.5.21) (2025-10-31)
+
+**Note:** Version bump only for package @synerise/ds-factors
+
+
+
+
+
 ## [1.5.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.5.19...@synerise/ds-factors@1.5.20) (2025-10-22)
 
 **Note:** Version bump only for package @synerise/ds-factors

package/dist/FactorTypeSelector/FactorTypeSelector.d.ts

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

package/dist/FactorTypeSelector/FactorTypeSelector.js

@@ -1,9 +1,9 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { theme } from '@synerise/ds-core';
-import Dropdown from '@synerise/ds-dropdown';
+import { DropdownMenu } from '@synerise/ds-dropdown';
 import Icon, { CheckS } from '@synerise/ds-icon';
-import ListItem from '@synerise/ds-list-item';
 import Tooltip from '@synerise/ds-tooltip';
+import { getPopupContainer } from '@synerise/ds-utils';
 import { ALL_FACTOR_TYPES } from '../Factors.types';
 import * as S from './FactorTypeSelector.styles';
 var FactorTypeSelector = function FactorTypeSelector(_ref) {
@@ -13,12 +13,10 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
     availableFactorTypes = _ref.availableFactorTypes,
     factorTypeMapping = _ref.factorTypeMapping,
     selectedFactor = _ref.selectedFactor,
+    getPopupContainerOverride = _ref.getPopupContainerOverride,
     texts = _ref.texts,
     readOnly = _ref.readOnly;
-  var _useState = useState(false),
-    dropdownOpen = _useState[0],
-    setDropdownOpen = _useState[1];
-  var typesList = useMemo(function () {
+  var typesListData = useMemo(function () {
     var list = availableFactorTypes || ALL_FACTOR_TYPES;
     if (unavailableFactorTypes !== undefined) {
       list = [].concat(list).filter(function (type) {
@@ -27,8 +25,8 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
     }
     return list.map(function (type) {
       var typeData = factorTypeMapping[type];
-      return /*#__PURE__*/React.createElement(ListItem, {
-        className: "ds-factor-type",
+      return {
+        className: 'ds-factor-type',
         key: typeData.name,
         prefixel: /*#__PURE__*/React.createElement(Icon, {
           component: typeData.icon
@@ -39,9 +37,9 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
         }) : '',
         onClick: function onClick() {
           setSelectedFactorType(type);
-          setDropdownOpen(false);
-        }
-      }, texts[type]);
+        },
+        text: texts[type]
+      };
     });
   }, [availableFactorTypes, unavailableFactorTypes, factorTypeMapping, selectedFactorType, texts, setSelectedFactorType]);
   var trigger = /*#__PURE__*/React.createElement(S.TriggerButton, {
@@ -61,14 +59,15 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
     React.createElement(Tooltip, {
       title: texts[selectedFactorType],
       trigger: ['hover']
-    }, /*#__PURE__*/React.createElement(Dropdown, {
-      open: dropdownOpen,
-      onOpenChange: setDropdownOpen,
-      dropdownRender: function dropdownRender() {
-        return /*#__PURE__*/React.createElement(S.FactorTypeList, null, typesList);
-      },
+    }, /*#__PURE__*/React.createElement(DropdownMenu, {
+      dataSource: typesListData,
       trigger: ['click'],
-      disabled: readOnly
+      disabled: readOnly,
+      getPopupContainer: getPopupContainerOverride || getPopupContainer,
+      popoverProps: {
+        testId: 'factors-types'
+      },
+      asChild: true
     }, trigger))
   );
 };

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

@@ -1,3 +1,29 @@
-import Button from '@synerise/ds-button';
 export declare const FactorTypeList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TriggerButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+export declare const TriggerButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "onClick" | "type"> & {
+    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import("react").ButtonHTMLAttributes<any>, "onClick" | "type">>, "type" | "ghost"> & {
+    type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
+    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
+    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import("@synerise/ds-tag").TagProps;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+}, any, {}, never>;

package/dist/FactorValue/Array/Array.styles.d.ts

@@ -1,4 +1,3 @@
-import Button from '@synerise/ds-button';
 export declare const TextArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/input").TextAreaProps & {
     error?: boolean;
 } & import("react").RefAttributes<import("antd/lib/input/TextArea").TextAreaRef>>, any, {
@@ -16,7 +15,34 @@ export declare const Modal: import("styled-components").StyledComponent<{
 }, never>;
 export declare const EmptyState: import("styled-components").StyledComponent<({ size, label, text, button, fontSize, customIcon, className, mode, iconPosition, textAlign, }: import("@synerise/ds-empty-states").EmptyStatesProps) => React.JSX.Element, any, {}, never>;
 export declare const TriggerButtonLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TriggerButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+export declare const TriggerButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "onClick" | "type"> & {
+    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import("react").ButtonHTMLAttributes<any>, "onClick" | "type">>, "type" | "ghost"> & {
+    type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
+    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
+    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import("@synerise/ds-tag").TagProps;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+}, any, {}, never>;
 export declare const ModalFooterLeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ModalSubHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ModalContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -26,6 +52,6 @@ export declare const SearchWrapper: import("styled-components").StyledComponent<
 export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CreatorItemsList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DeleteIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
+export declare const DeleteIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const CollectorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CreatorRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FactorValue/Date/Date.js

@@ -31,14 +31,9 @@ var DateInput = function DateInput(_ref) {
   var handleClear = useCallback(function () {
     onChange(undefined);
   }, [onChange]);
-  var handleVisibleChange = useCallback(function (visible) {
-    if (!visible) {
-      onDeactivate && onDeactivate();
-      onChange(localValueAsDate);
-    } else {
-      onActivate && onActivate();
-    }
-  }, [localValueAsDate, onActivate, onChange, onDeactivate]);
+  var handleOpenChange = useCallback(function (open) {
+    open && onActivate && onActivate();
+  }, [onActivate]);
   return /*#__PURE__*/React.createElement(DatePicker, {
     onClear: handleClear,
     onApply: changeHandler,
@@ -49,15 +44,20 @@ var DateInput = function DateInput(_ref) {
     error: error,
     readOnly: readOnly,
     allowClear: allowClear,
+    autoFocus: opened,
     inputProps: {
       autoResize: {
         minWidth: '123px'
       }
     },
+    onDropdownVisibleChange: handleOpenChange,
     dropdownProps: {
-      visible: opened,
+      open: opened,
+      onOpenChange: handleOpenChange,
       getPopupContainer: getPopupContainerOverride || getPopupContainer,
-      onVisibleChange: handleVisibleChange
+      onDismiss: function onDismiss() {
+        onDeactivate == null || onDeactivate();
+      }
     }
   });
 };

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

@@ -1,4 +1,21 @@
-export declare const DynamicKeyInput: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: import("@synerise/ds-input").InputProps) => React.JSX.Element, any, {
+export declare const DynamicKeyInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    error?: boolean;
+    className?: string;
+    counterLimit?: number;
+    renderCustomCounter?: (count?: number) => React.ReactNode;
+    icon1?: React.ReactElement;
+    icon1Tooltip?: React.ReactElement;
+    icon2?: React.ReactElement;
+    icon2Tooltip?: React.ReactElement;
+    resetMargin?: boolean;
+    handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
+    prefixel?: React.ReactNode;
+    suffixel?: React.ReactNode;
+    autoResize?: import("@synerise/ds-input").AutoResizeProp;
+    autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
+    expandable?: boolean;
+    expandableTooltip?: React.ReactNode;
+} & Omit<import("@synerise/ds-form-field").ContentAboveProps, "id" | "rightSide"> & import("@synerise/ds-form-field").ContentBelowProps & import("antd").InputProps & import("react").RefAttributes<HTMLDivElement>>, any, {
     index: 0 | 1;
     withoutTypeSelector?: boolean;
 }, never>;

package/dist/FactorValue/Parameter/Parameter.js

@@ -78,11 +78,12 @@ var ParameterInput = function ParameterInput(_ref) {
   }, []);
   var onDropdownVisibilityChange = useCallback(function (newValue) {
     newValue && onActivate && onActivate();
-    if (!newValue) {
-      onDeactivate && onDeactivate();
-      setDropdownVisible(false);
-    }
-  }, [onActivate, onDeactivate]);
+    setDropdownVisible(newValue);
+    // if (!newValue) {
+    //   // onDeactivate && onDeactivate();
+    //   setDropdownVisible(false);
+    // }
+  }, [onActivate]);
   var triggerMode = useMemo(function () {
     if (parameterIcon) {
       return readOnly ? 'icon-label' : 'two-icons';
@@ -140,9 +141,12 @@ var ParameterInput = function ParameterInput(_ref) {
     "data-popup-container": true,
     "data-testid": "ds-factors-parameter"
   }, /*#__PURE__*/React.createElement(Dropdown, {
-    visible: dropdownVisible,
+    open: dropdownVisible,
     getPopupContainer: getPopupContainerOverride || getPopupContainer,
-    onVisibleChange: onDropdownVisibilityChange,
+    onOpenChange: onDropdownVisibilityChange,
+    asChild: false,
+    size: 300,
+    onDismiss: onDeactivate,
     overlay: /*#__PURE__*/React.createElement(ParameterDropdown, _extends({
       setDropdownVisible: setDropdownVisible,
       setSelected: handleChange
@@ -151,7 +155,10 @@ var ParameterInput = function ParameterInput(_ref) {
       loading: loading,
       outerHeight: outerHeight,
       value: isSelected ? parameter : undefined
-    }))
+    })),
+    popoverProps: {
+      testId: 'factors-parameters'
+    }
   }, trigger));
 };
 export default ParameterInput;

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

@@ -1,5 +1,4 @@
 import { VariableSizeList } from 'react-window';
-import Button from '@synerise/ds-button';
 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, {
@@ -8,7 +7,34 @@ export declare const ItemsList: import("styled-components").StyledComponent<"div
 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 ParameterButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+export declare const ParameterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "onClick" | "type"> & {
+    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import("react").ButtonHTMLAttributes<any>, "onClick" | "type">>, "type" | "ghost"> & {
+    type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
+    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
+    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import("@synerise/ds-tag").TagProps;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+}, any, {}, never>;
 export declare const StyledList: import("styled-components").StyledComponent<typeof VariableSizeList, any, {}, never>;
 export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import("@synerise/ds-skeleton").SkeletonProps) => React.JSX.Element, any, {
     contentHeight?: number;

package/dist/FactorValue/Parameter/ParameterDropdown.js

@@ -1,7 +1,7 @@
 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, useRef, useState } from 'react';
 import { v4 as uuid } from 'uuid';
-import { theme } from '@synerise/ds-core';
+import { useTheme } from '@synerise/ds-core';
 import Divider from '@synerise/ds-divider';
 import Dropdown from '@synerise/ds-dropdown';
 import Icon, { ArrowRightCircleM, SearchM } from '@synerise/ds-icon';
@@ -35,6 +35,7 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
   var listRef = useRef(null);
   var overlayRef = useRef(null);
   var scrollBarRef = useRef(null);
+  var theme = useTheme();
   var _useGroups = useGroups(items, groups, renderEmptyGroups),
     visibleGroups = _useGroups.visibleGroups,
     tabs = _useGroups.tabs,
@@ -254,9 +255,6 @@ var ParameterDropdown = function ParameterDropdown(_ref) {
   }, [activeGroup, hasSearch, hasTabs, outerHeight]);
   return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
     "data-testid": "ds-factors-parameter-dropdown-wrapper",
-    style: {
-      width: '300px'
-    },
     ref: overlayRef,
     onKeyDown: function onKeyDown(event) {
       setSearchInputFocus(false);

package/dist/FactorValue/RelativeDate/RelativeDate.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type FactorValueComponentProps } from '../../Factors.types';
-declare const RelativeDateInput: ({ value, onChange, texts: allTexts, opened, onDeactivate, onActivate, error, allowClear, readOnly, triggerValueFormatter, getPopupContainerOverride, availableUnits, uncontrolledComponent, }: FactorValueComponentProps) => React.JSX.Element;
+declare const RelativeDateInput: ({ value, onChange, texts: allTexts, opened, onActivate, error, allowClear, readOnly, triggerValueFormatter, getPopupContainerOverride, availableUnits, uncontrolledComponent, }: FactorValueComponentProps) => React.JSX.Element;
 export default RelativeDateInput;

package/dist/FactorValue/RelativeDate/RelativeDate.js

@@ -11,7 +11,6 @@ var RelativeDateInput = function RelativeDateInput(_ref) {
     onChange = _ref.onChange,
     allTexts = _ref.texts,
     opened = _ref.opened,
-    onDeactivate = _ref.onDeactivate,
     onActivate = _ref.onActivate,
     error = _ref.error,
     allowClear = _ref.allowClear,
@@ -37,13 +36,11 @@ var RelativeDateInput = function RelativeDateInput(_ref) {
     }
   }, [value, uncontrolledComponent]);
   var handleOpenChange = useCallback(function (open) {
-    if (!open) {
-      onDeactivate && onDeactivate();
-    } else {
+    if (open) {
       onActivate && onActivate();
     }
     setIsOpen(open);
-  }, [onActivate, onDeactivate]);
+  }, [onActivate]);
   var handleApply = useCallback(function (date) {
     onChange(date);
     handleOpenChange(false);
@@ -100,15 +97,18 @@ var RelativeDateInput = function RelativeDateInput(_ref) {
     getPopupContainer: getPopupContainerOverride || getPopupContainer,
     open: isOpen,
     onOpenChange: handleOpenChange,
-    dropdownRender: function dropdownRender() {
-      return /*#__PURE__*/React.createElement(RelativeDateDropdown, {
-        onApply: handleApply,
-        onCancel: handleClose,
-        value: localValue,
-        texts: texts,
-        availableUnits: availableUnits
-      });
-    }
+    asChild: false,
+    size: 420,
+    popoverProps: {
+      testId: 'factors-relative-date'
+    },
+    overlay: /*#__PURE__*/React.createElement(RelativeDateDropdown, {
+      onApply: handleApply,
+      onCancel: handleClose,
+      value: localValue,
+      texts: texts,
+      availableUnits: availableUnits
+    })
   }, trigger);
 };
 export default RelativeDateInput;

package/dist/FactorValue/RelativeDate/RelativeDateDropdown.styles.d.ts

@@ -2,6 +2,23 @@ export declare const RelativeDateDropdownWrapper: import("styled-components").St
 export declare const RelativeDateDropdownFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RelativeDateCurrentLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ClearIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
-export declare const ChevronIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
-export declare const Trigger: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: import("@synerise/ds-input").InputProps) => React.JSX.Element, any, {}, never>;
+export declare const ClearIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const ChevronIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const Trigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    error?: boolean;
+    className?: string;
+    counterLimit?: number;
+    renderCustomCounter?: (count?: number) => React.ReactNode;
+    icon1?: React.ReactElement;
+    icon1Tooltip?: React.ReactElement;
+    icon2?: React.ReactElement;
+    icon2Tooltip?: React.ReactElement;
+    resetMargin?: boolean;
+    handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
+    prefixel?: React.ReactNode;
+    suffixel?: React.ReactNode;
+    autoResize?: import("@synerise/ds-input").AutoResizeProp;
+    autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
+    expandable?: boolean;
+    expandableTooltip?: React.ReactNode;
+} & Omit<import("@synerise/ds-form-field").ContentAboveProps, "id" | "rightSide"> & import("@synerise/ds-form-field").ContentBelowProps & import("antd").InputProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/Factors.js

@@ -142,7 +142,8 @@ var Factors = function Factors(_ref) {
     selectedFactor: selectedFactorData,
     availableFactorTypes: availableFactorTypes,
     unavailableFactorTypes: unavailableFactorTypes,
-    readOnly: readOnly
+    readOnly: readOnly,
+    getPopupContainerOverride: getPopupContainerOverride
   }), /*#__PURE__*/React.createElement(FactorValue, {
     value: value,
     onChangeValue: onChangeValue,

package/dist/Factors.types.d.ts

@@ -198,7 +198,7 @@ export type FactorsProps = {
     getMenuEntryProps?: (arg?: ParameterValueType) => MenuItemProps;
     uncontrolledComponent?: boolean;
 };
-export type FactorTypeSelectorProps = Pick<FactorsProps, 'unavailableFactorTypes' | 'availableFactorTypes' | 'selectedFactorType' | 'readOnly'> & {
+export type FactorTypeSelectorProps = Pick<FactorsProps, 'unavailableFactorTypes' | 'availableFactorTypes' | 'selectedFactorType' | 'readOnly' | 'getPopupContainerOverride'> & {
     setSelectedFactorType: (factor: FactorType) => void;
     selectedFactor: SelectedFactorType;
     factorTypeMapping: FactorTypeMapping;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-factors",
-  "version": "1.5.20",
+  "version": "1.6.0",
   "description": "Factors UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,33 +35,33 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^1.1.24",
-    "@synerise/ds-autocomplete": "^1.2.13",
-    "@synerise/ds-badge": "^1.0.24",
-    "@synerise/ds-button": "^1.4.16",
-    "@synerise/ds-button-group": "^1.1.23",
-    "@synerise/ds-collector": "^1.4.2",
-    "@synerise/ds-date-picker": "^1.2.17",
-    "@synerise/ds-date-range-picker": "^1.3.35",
-    "@synerise/ds-divider": "^1.2.0",
-    "@synerise/ds-dropdown": "^1.0.33",
-    "@synerise/ds-empty-states": "^1.0.20",
-    "@synerise/ds-icon": "^1.7.3",
-    "@synerise/ds-information-card": "^1.2.2",
-    "@synerise/ds-inline-edit": "^1.0.37",
-    "@synerise/ds-input": "^1.4.1",
-    "@synerise/ds-input-number": "^1.2.14",
-    "@synerise/ds-list-item": "^1.1.0",
-    "@synerise/ds-menu": "^1.1.2",
-    "@synerise/ds-modal": "^1.2.16",
-    "@synerise/ds-result": "^1.0.29",
-    "@synerise/ds-scrollbar": "^1.1.9",
-    "@synerise/ds-search": "^1.3.9",
-    "@synerise/ds-select": "^1.2.2",
-    "@synerise/ds-skeleton": "^1.0.24",
-    "@synerise/ds-tabs": "^1.0.35",
-    "@synerise/ds-tag": "^1.3.3",
-    "@synerise/ds-tooltip": "^1.2.1",
+    "@synerise/ds-alert": "^1.1.25",
+    "@synerise/ds-autocomplete": "^1.2.15",
+    "@synerise/ds-badge": "^1.0.25",
+    "@synerise/ds-button": "^1.5.0",
+    "@synerise/ds-button-group": "^1.1.24",
+    "@synerise/ds-collector": "^1.4.4",
+    "@synerise/ds-date-picker": "^1.3.0",
+    "@synerise/ds-date-range-picker": "^1.4.0",
+    "@synerise/ds-divider": "^1.2.1",
+    "@synerise/ds-dropdown": "^1.1.0",
+    "@synerise/ds-empty-states": "^1.0.21",
+    "@synerise/ds-icon": "^1.8.0",
+    "@synerise/ds-information-card": "^1.3.0",
+    "@synerise/ds-inline-edit": "^1.1.0",
+    "@synerise/ds-input": "^1.5.0",
+    "@synerise/ds-input-number": "^1.2.15",
+    "@synerise/ds-list-item": "^1.2.0",
+    "@synerise/ds-menu": "^1.2.0",
+    "@synerise/ds-modal": "^1.2.17",
+    "@synerise/ds-result": "^1.0.30",
+    "@synerise/ds-scrollbar": "^1.2.0",
+    "@synerise/ds-search": "^1.3.10",
+    "@synerise/ds-select": "^1.3.0",
+    "@synerise/ds-skeleton": "^1.0.25",
+    "@synerise/ds-tabs": "^1.1.0",
+    "@synerise/ds-tag": "^1.4.0",
+    "@synerise/ds-tooltip": "^1.3.0",
     "@synerise/ds-utils": "^1.5.0",
     "copy-to-clipboard": "^3.3.3",
     "lodash": "^4.17.21",
@@ -75,5 +75,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "a40fca2cc78eda64afa96d18dc4d177538a22404"
+  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
 }