@synerise/ds-dropdown 1.0.34 → 1.1.1

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.1.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-dropdown@1.1.0...@synerise/ds-dropdown@1.1.1) (2025-11-13)
+
+**Note:** Version bump only for package @synerise/ds-dropdown
+
+
+
+
+
+# [1.1.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-dropdown@1.0.34...@synerise/ds-dropdown@1.1.0) (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+
+
+
+
+
 ## [1.0.34](https://github.com/synerise/synerise-design/compare/@synerise/ds-dropdown@1.0.33...@synerise/ds-dropdown@1.0.34) (2025-10-31)
 
 **Note:** Version bump only for package @synerise/ds-dropdown

package/README.md

@@ -21,7 +21,7 @@ Dropdown UI Component
 | overlayClassName  | Class name of the dropdown root element                                                                                                                                                  | string                                                                                              | -                     |
 | overlayStyle      | Style of the dropdown root element                                                                                                                                                       | object                                                                                              | -                     |
 | placement         | Placement of pop menu.                                                                                                                                                                   | `bottomLeft` / `bottomCenter` / `bottomRight` / `topLeft` / `topCenter` / `topRight` / `bottomLeft` | -                     |
-| trigger           | Trigger mode which executes the drop-down action (hover doesn't work on mobile device)                                                                                                   | `['hover', 'click', 'contextMenu']`                                                                 | `['hover']`           |
+| trigger           | Trigger mode which executes the drop-down action (hover doesn't work on mobile device)                                                                                                   | `['hover', 'click']`                                                                 | `['hover']`           |
 | visible           | Whether the dropdown menu is visible                                                                                                                                                     | boolean                                                                                             | -                     |
 | onVisibleChange   | A callback executed on visibility changes.                                                                                                                                               | (visible: boolean)=>void                                                                            | -                     |
 | hideOnItemClick   | Will hide dropdown on click of an item inside the dropdown changes. Provide a CSS selector of element that should trigger dropdown closing or `true` to use `[role="menuitem"]` selector | boolean / string                                                                                    | -                     |

package/dist/Dropdown.const.d.ts

@@ -0,0 +1,14 @@
+import { type Placement } from '@floating-ui/react';
+import { type ListItemProps } from '@synerise/ds-list-item';
+import { type FlipConfig, type OffsetConfig, type ShiftConfig } from '@synerise/ds-popover';
+import { type DropdownPlacement } from './Dropdown.types';
+export declare const PLACEMENT_MAP: Record<DropdownPlacement, Placement>;
+export declare const COPYABLE_CLOSE_DELAY = 500;
+export declare const DEFAULT_MATCHING_FUNCTION: (item: ListItemProps, query: string) => boolean;
+export declare const DROPDOWN_MAX_HEIGHT = 400;
+export declare const MAX_VISIBLE_ITEMS = 7;
+export declare const SCROLLBAR_OFFSET = 11;
+export declare const POPOVER_TRANSITION_DURATION = 150;
+export declare const POPOVER_OFFSET_CONFIG: OffsetConfig;
+export declare const POPOVER_FLIP_CONFIG: FlipConfig;
+export declare const POPOVER_SHIFT_CONFIG: ShiftConfig;

package/dist/Dropdown.const.js

@@ -0,0 +1,25 @@
+export var PLACEMENT_MAP = {
+  topRight: 'top-end',
+  topLeft: 'top-start',
+  top: 'top',
+  topCenter: 'top',
+  bottom: 'bottom',
+  bottomCenter: 'bottom',
+  bottomLeft: 'bottom-start',
+  bottomRight: 'bottom-end'
+};
+export var COPYABLE_CLOSE_DELAY = 500;
+export var DEFAULT_MATCHING_FUNCTION = function DEFAULT_MATCHING_FUNCTION(item, query) {
+  return !!(item.text && item.text.toLocaleLowerCase().match(query.toLocaleLowerCase()));
+};
+export var DROPDOWN_MAX_HEIGHT = 400;
+export var MAX_VISIBLE_ITEMS = 7;
+export var SCROLLBAR_OFFSET = 11;
+export var POPOVER_TRANSITION_DURATION = 150;
+export var POPOVER_OFFSET_CONFIG = {
+  mainAxis: 8
+};
+export var POPOVER_FLIP_CONFIG = {};
+export var POPOVER_SHIFT_CONFIG = {
+  crossAxis: true
+};

package/dist/Dropdown.d.ts

@@ -1,24 +1,18 @@
-import { type DropDownProps as AntDropDownProps, type DropdownButtonProps } from 'antd/lib/dropdown';
 import { type ComponentType } from 'react';
-import '@synerise/ds-core/dist/js/style';
-import SearchBar from '@synerise/ds-search-bar/';
+import SearchBar from '@synerise/ds-search-bar';
 import { Wrapper } from './Dropdown.styles';
-import BackAction from './elements/BackAction/BackAction';
-import BottomAction from './elements/BottomAction/BottomAction';
-import TextTrigger from './elements/TextTrigger/TextTrigger';
-import './style/index.less';
-export type DropdownProps = AntDropDownProps & {
-    destroyPopupOnHide?: boolean;
-    hideOnItemClick?: string | boolean;
-};
-type DropdownButtonType = ComponentType<DropdownButtonProps>;
+import { type DropdownProps } from './Dropdown.types';
+import { BackAction } from './components/BackAction/BackAction';
+import { BottomAction } from './components/BottomAction/BottomAction';
+import { MenuWrapper } from './components/DropdownMenuList/DropdownMenuList.styles';
+import { TextTrigger } from './components/TextTrigger/TextTrigger';
 type SubComponents = {
     Wrapper: typeof Wrapper;
+    MenuWrapper: typeof MenuWrapper;
     SearchInput: typeof SearchBar;
     BottomAction: typeof BottomAction;
     BackAction: typeof BackAction;
-    Button: DropdownButtonType;
     TextTrigger: typeof TextTrigger;
 };
-declare const Dropdown: ComponentType<DropdownProps> & SubComponents;
+export declare const Dropdown: ComponentType<DropdownProps> & SubComponents;
 export default Dropdown;

package/dist/Dropdown.js

@@ -1,86 +1,90 @@
-var _excluded = ["hideOnItemClick", "placement", "dropdownRender", "visible", "open", "onVisibleChange", "onOpenChange", "overlay"];
+var _excluded = ["hideOnItemClick", "placement", "dropdownRender", "open", "onOpenChange", "onDismiss", "overlay", "trigger", "size", "asChild", "children", "overlayStyle", "overlayClassName", "disabled", "destroyPopupOnHide", "align", "getPopupContainer", "popoverProps", "popoverTriggerProps", "footer"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import AntdDropdown from 'antd/lib/dropdown';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import '@synerise/ds-core/dist/js/style';
-import SearchBar from '@synerise/ds-search-bar/';
-import { getPopupContainer } from '@synerise/ds-utils';
-import { OverlayWrapper, Wrapper } from './Dropdown.styles';
-import BackAction from './elements/BackAction/BackAction';
-import BottomAction from './elements/BottomAction/BottomAction';
-import TextTrigger from './elements/TextTrigger/TextTrigger';
-import "./style/index.css";
-var topPlacements = ['topLeft', 'topRight', 'topCenter'];
-var Dropdown = function Dropdown(_ref) {
+import React, { useMemo, useState } from 'react';
+import SearchBar from '@synerise/ds-search-bar';
+import { getPopupContainer as getPopupContainerDefault } from '@synerise/ds-utils';
+import { Wrapper } from './Dropdown.styles';
+import { BackAction } from './components/BackAction/BackAction';
+import { BottomAction } from './components/BottomAction/BottomAction';
+import { DropdownFooter } from './components/DropdownFooter/DropdownFooter';
+import { MenuWrapper } from './components/DropdownMenuList/DropdownMenuList.styles';
+import { DropdownPopover } from './components/DropdownPopover/DropdownPopover';
+import { TextTrigger } from './components/TextTrigger/TextTrigger';
+import { useDropdownVisibility } from './hooks/useDropdownVisibility';
+export var Dropdown = function Dropdown(_ref) {
   var hideOnItemClick = _ref.hideOnItemClick,
     placement = _ref.placement,
     dropdownRender = _ref.dropdownRender,
-    visible = _ref.visible,
     open = _ref.open,
-    onVisibleChange = _ref.onVisibleChange,
     onOpenChange = _ref.onOpenChange,
+    onDismiss = _ref.onDismiss,
     overlay = _ref.overlay,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var openMerged = open !== undefined ? open : visible;
-  var onOpenChangeMerged = onOpenChange !== undefined ? onOpenChange : onVisibleChange;
-  var _useState = useState(openMerged || false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var overlayWrapperRef = useRef(null);
-  useEffect(function () {
-    openMerged !== undefined && setIsOpen(openMerged);
-  }, [openMerged]);
-  var handleOpenChange = function handleOpenChange(newIsOpen) {
-    onOpenChangeMerged && onOpenChangeMerged(newIsOpen);
-    setIsOpen(newIsOpen);
-  };
-  var offsetVertical = topPlacements.find(function (topPlacement) {
-    return topPlacement === placement;
-  }) !== undefined ? -8 : 8;
-  var renderContent = useCallback(function (originNode) {
-    if (overlay) {
-      return typeof overlay === 'function' ? overlay() : overlay;
-    }
-    return dropdownRender && dropdownRender(originNode);
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
+    size = _ref.size,
+    asChild = _ref.asChild,
+    children = _ref.children,
+    overlayStyle = _ref.overlayStyle,
+    overlayClassName = _ref.overlayClassName,
+    disabled = _ref.disabled,
+    destroyPopupOnHide = _ref.destroyPopupOnHide,
+    align = _ref.align,
+    _ref$getPopupContaine = _ref.getPopupContainer,
+    getPopupContainer = _ref$getPopupContaine === void 0 ? getPopupContainerDefault : _ref$getPopupContaine,
+    popoverProps = _ref.popoverProps,
+    popoverTriggerProps = _ref.popoverTriggerProps,
+    footer = _ref.footer,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useDropdownVisibilit = useDropdownVisibility({
+      open: open,
+      onOpenChange: onOpenChange
+    }),
+    isOpen = _useDropdownVisibilit.open,
+    toggleOpen = _useDropdownVisibilit.toggleOpen;
+  var _useState = useState(null),
+    activeIndex = _useState[0],
+    setActiveIndex = _useState[1];
+  var renderedOverlay = useMemo(function () {
+    return overlay ? overlay : dropdownRender && dropdownRender();
   }, [dropdownRender, overlay]);
-  var renderOverlay = useCallback(function (originNode) {
-    return /*#__PURE__*/React.createElement(OverlayWrapper, {
-      ref: overlayWrapperRef
-    }, renderContent(originNode));
-  }, [renderContent]);
-  useEffect(function () {
-    var handleOverlayClick = function handleOverlayClick(event) {
-      if (overlayWrapperRef.current && hideOnItemClick && event.target instanceof HTMLElement) {
-        var itemSelector = typeof hideOnItemClick === 'string' ? hideOnItemClick : '[role="menuitem"]';
-        var listItem = event.target.closest(itemSelector);
-        if (overlayWrapperRef.current.contains(listItem)) {
-          setIsOpen(false);
-        }
-      }
-    };
-    var overlayNode = overlayWrapperRef.current;
-    overlayNode && overlayNode.addEventListener('click', handleOverlayClick);
-    return function () {
-      overlayNode && overlayNode.removeEventListener('click', handleOverlayClick);
-    };
-  });
-  return /*#__PURE__*/React.createElement(AntdDropdown, _extends({
+  var isTriggeredByClick = Array.isArray(trigger) ? trigger.includes('click') : trigger === 'click';
+  return disabled ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(DropdownPopover, {
     getPopupContainer: getPopupContainer,
-    align: {
-      offset: [0, offsetVertical]
-    },
-    trigger: ['click'],
+    overlayHTMLAttributes: htmlAttributes,
     open: isOpen,
-    onOpenChange: handleOpenChange,
-    dropdownRender: renderOverlay,
-    placement: placement
-  }, rest));
+    placement: placement,
+    asChild: asChild,
+    overlay: /*#__PURE__*/React.createElement(React.Fragment, null, renderedOverlay, footer && /*#__PURE__*/React.createElement(DropdownFooter, {
+      footer: footer
+    })),
+    handleOpenChange: toggleOpen,
+    handleTriggerClick: function handleTriggerClick() {
+      isTriggeredByClick && toggleOpen(!isOpen);
+    },
+    hideOnItemClick: hideOnItemClick,
+    handleItemClick: function handleItemClick() {
+      if (hideOnItemClick) {
+        toggleOpen(false);
+      }
+    },
+    onDismiss: onDismiss,
+    popoverProps: _extends({}, popoverProps, {
+      componentId: 'dropdown'
+    }),
+    popoverTriggerProps: popoverTriggerProps,
+    trigger: trigger,
+    size: size,
+    overlayStyle: overlayStyle,
+    overlayClassName: overlayClassName,
+    activeIndex: activeIndex,
+    setActiveIndex: setActiveIndex
+  }, children);
 };
 Dropdown.Wrapper = Wrapper;
+Dropdown.MenuWrapper = MenuWrapper;
 Dropdown.SearchInput = SearchBar;
 Dropdown.BottomAction = BottomAction;
 Dropdown.BackAction = BackAction;
-Dropdown.Button = AntdDropdown.Button;
 Dropdown.TextTrigger = TextTrigger;
 export default Dropdown;

package/dist/Dropdown.styles.d.ts

@@ -1,2 +1 @@
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const OverlayWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Dropdown.styles.js

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
+import { Wrapper as ListItemWrapper } from '@synerise/ds-list-item/dist/components/Text/Text.styles';
 export var Wrapper = styled.div.withConfig({
   displayName: "Dropdownstyles__Wrapper",
   componentId: "sc-1onktq5-0"
-})(["background:#fff;width:200px;"]);
-export var OverlayWrapper = styled.div.withConfig({
-  displayName: "Dropdownstyles__OverlayWrapper",
-  componentId: "sc-1onktq5-1"
-})([""]);
+})(["overflow:hidden;background:", ";", "{min-width:0;}"], function (props) {
+  return props.theme.palette.white;
+}, ListItemWrapper);

package/dist/Dropdown.types.d.ts

@@ -0,0 +1,54 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type OpenChangeReason } from '@floating-ui/react';
+import { type PopoverOptions, type PopoverTriggerType } from '@synerise/ds-popover';
+import { type WithHTMLAttributes } from '@synerise/ds-utils';
+export type DropdownProps = Omit<WithHTMLAttributes<HTMLDivElement, DropdownSharedProps & {
+    /**
+     * @deprecated all dropdowns are destroyed when hidden
+     */
+    destroyPopupOnHide?: boolean;
+}>, 'style'>;
+/**
+ * bottom and bottomCenter are the same - legacy types
+ * top and topCenter are the same - legacy types
+ */
+export type DropdownPlacement = 'topLeft' | 'top' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottom' | 'bottomCenter' | 'bottomRight';
+export type DropdownSize = 'small' | 'medium' | 'large' | 'auto' | 'match-trigger' | 'min-match-trigger';
+export type DropdownSharedProps = {
+    disabled?: boolean;
+    asChild?: boolean;
+    overlayStyle?: CSSProperties;
+    overlayClassName?: string;
+    overlayHTMLAttributes?: HTMLAttributes<HTMLDivElement>;
+    placement?: DropdownPlacement;
+    getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+    trigger?: PopoverTriggerType | PopoverTriggerType[];
+    size?: DropdownSize | number;
+    overlay?: ReactNode;
+    hideOnItemClick?: string | boolean;
+    /**
+     * @deprecated use overlay prop
+     */
+    dropdownRender?: () => ReactNode;
+    /**
+     * use this prop if you need a controlled component
+     */
+    open?: boolean;
+    /**
+     * use this prop if you need a controlled component
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** this callback fires if the dropdown is closed by clicking outside */
+    onDismiss?: (event?: Event, reason?: OpenChangeReason) => void;
+    footer?: ReactNode | {
+        left?: ReactNode;
+        right?: ReactNode;
+    };
+    children: ReactNode;
+    /**
+     * @deprecated this should not be needed anymore
+     */
+    align?: any;
+    popoverProps?: Partial<PopoverOptions>;
+    popoverTriggerProps?: Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'>;
+};

package/dist/components/BackAction/BackAction.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type Props } from './BackAction.types';
+export declare const BackAction: ({ label, onClick, tooltip, tooltipProps, }: Props) => React.JSX.Element;

package/dist/{elements → components}/BackAction/BackAction.js

@@ -4,7 +4,7 @@ import Divider from '@synerise/ds-divider';
 import Icon, { ArrowLeftM } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import * as S from './BackAction.styles';
-var BackAction = function BackAction(_ref) {
+export var BackAction = function BackAction(_ref) {
   var label = _ref.label,
     onClick = _ref.onClick,
     tooltip = _ref.tooltip,
@@ -20,9 +20,6 @@ var BackAction = function BackAction(_ref) {
     "data-testid": "dropdown-back-action-label"
   }, label)), /*#__PURE__*/React.createElement(Divider, {
     dashed: true,
-    style: {
-      margin: '0'
-    }
+    withSideMargin: true
   }));
-};
-export default BackAction;
+};

package/dist/{elements → components}/BackAction/BackAction.styles.js

@@ -1,25 +1,25 @@
 import styled from 'styled-components';
 export var Label = styled.div.withConfig({
   displayName: "BackActionstyles__Label",
-  componentId: "sc-1sx2myx-0"
+  componentId: "sc-1cwqmxm-0"
 })(["font-weight:500;font-size:14px;transition:color 0.3s ease;color:", ";"], function (props) {
   return props.theme.palette['grey-700'];
 });
 export var IconWrapper = styled.div.withConfig({
   displayName: "BackActionstyles__IconWrapper",
-  componentId: "sc-1sx2myx-1"
-})(["margin-right:12px;svg{transition:fill 0.3s ease;fill:", ";}"], function (props) {
+  componentId: "sc-1cwqmxm-1"
+})(["margin-right:12px;color:", ";transition:color 0.3s ease;"], function (props) {
   return props.theme.palette['grey-700'];
 });
 export var BackActionWrapper = styled.div.withConfig({
   displayName: "BackActionstyles__BackActionWrapper",
-  componentId: "sc-1sx2myx-2"
-})(["padding:0 16px;&:hover{", "{color:", ";}", "{svg{fill:", ";}}}"], Label, function (props) {
+  componentId: "sc-1cwqmxm-2"
+})(["padding:0 8px;&:hover{", "{color:", ";}", "{color:", ";}}"], Label, function (props) {
   return props.theme.palette['grey-800'];
 }, IconWrapper, function (props) {
   return props.theme.palette['grey-800'];
 });
 export var ContentWrapper = styled.div.withConfig({
   displayName: "BackActionstyles__ContentWrapper",
-  componentId: "sc-1sx2myx-3"
-})(["padding:14px 0;display:flex;align-items:center;cursor:pointer;"]);
+  componentId: "sc-1cwqmxm-3"
+})(["padding:14px 8px;display:flex;align-items:center;cursor:pointer;"]);

package/dist/components/BottomAction/BottomAction.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type BottomActionProps } from './BottomAction.types';
+export declare const BottomAction: ({ onClickAction, children, icon, ...rest }: BottomActionProps) => React.JSX.Element;

package/dist/{elements → components}/BottomAction/BottomAction.js

@@ -4,7 +4,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import Icon from '@synerise/ds-icon';
 import * as S from './BottomAction.styles';
-var BottomAction = function BottomAction(_ref) {
+export var BottomAction = function BottomAction(_ref) {
   var onClickAction = _ref.onClickAction,
     children = _ref.children,
     icon = _ref.icon,
@@ -14,5 +14,4 @@ var BottomAction = function BottomAction(_ref) {
   }, rest), icon && /*#__PURE__*/React.createElement(S.IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     component: icon
   })), /*#__PURE__*/React.createElement(S.TextWrapper, null, children));
-};
-export default BottomAction;
+};

package/dist/{elements → components}/BottomAction/BottomAction.styles.js

@@ -1,17 +1,17 @@
 import styled from 'styled-components';
 export var IconWrapper = styled.div.withConfig({
   displayName: "BottomActionstyles__IconWrapper",
-  componentId: "sc-8f58y-0"
+  componentId: "sc-sbwluh-0"
 })(["margin-right:4px;svg{fill:", ";}"], function (props) {
   return props.theme.palette['grey-600'];
 });
 export var TextWrapper = styled.div.withConfig({
   displayName: "BottomActionstyles__TextWrapper",
-  componentId: "sc-8f58y-1"
+  componentId: "sc-sbwluh-1"
 })(["line-height:12px;width:100%;"]);
 export var BottomAction = styled.div.withConfig({
   displayName: "BottomActionstyles__BottomAction",
-  componentId: "sc-8f58y-2"
+  componentId: "sc-sbwluh-2"
 })(["background-color:", ";padding:0 16px;height:52px;display:flex;align-items:center;color:", ";font-weight:500;border-width:1px 0 0 0;border-color:", ";border-style:solid;margin-top:8px;cursor:pointer;&:hover{color:", ";", "{svg{fill:", ";}}}"], function (props) {
   return props.theme.palette['grey-050'];
 }, function (props) {

package/dist/components/DropdownFooter/DropdownFooter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type DropdownFooterProps } from './DropdownFooter.types';
+export declare const DropdownFooter: ({ footer }: DropdownFooterProps) => React.JSX.Element;

package/dist/components/DropdownFooter/DropdownFooter.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { isSplitFooter } from '../../utils';
+import * as S from './DropdownFooter.styles';
+export var DropdownFooter = function DropdownFooter(_ref) {
+  var footer = _ref.footer;
+  var split = isSplitFooter(footer);
+  return /*#__PURE__*/React.createElement(S.DropdownFooterWrapper, {
+    split: split
+  }, split ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.DropdownFooterLeft, null, footer.left), /*#__PURE__*/React.createElement(S.DropdownFooterLeft, null, footer.right)) : footer);
+};

package/dist/components/DropdownFooter/DropdownFooter.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const DropdownFooterWrapper: import("styled-components").StyledComponent<"div", any, {
+    split?: boolean;
+}, never>;
+export declare const DropdownFooterLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownFooterRight: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DropdownFooter/DropdownFooter.styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+export var DropdownFooterWrapper = styled.div.withConfig({
+  displayName: "DropdownFooterstyles__DropdownFooterWrapper",
+  componentId: "sc-q7mkt3-0"
+})(["background:", ";height:48px;padding:8px;display:flex;align-items:center;justify-content:", ";"], function (props) {
+  return props.theme.palette['grey-100'];
+}, function (props) {
+  return props.split ? 'space-between' : 'flex-end';
+});
+export var DropdownFooterLeft = styled.div.withConfig({
+  displayName: "DropdownFooterstyles__DropdownFooterLeft",
+  componentId: "sc-q7mkt3-1"
+})([""]);
+export var DropdownFooterRight = styled.div.withConfig({
+  displayName: "DropdownFooterstyles__DropdownFooterRight",
+  componentId: "sc-q7mkt3-2"
+})([""]);

package/dist/components/DropdownFooter/DropdownFooter.types.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export type DropdownFooterSplit = {
+    left?: ReactNode;
+    right?: ReactNode;
+};
+export type DropdownFooterProps = {
+    footer: ReactNode | DropdownFooterSplit;
+};

package/dist/components/DropdownFooter/DropdownFooter.types.js

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

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type ListItemProps } from '@synerise/ds-list-item';
+import { type DropdownMenuProps } from './DropdownMenu.types';
+export declare const DropdownMenu: <ItemType extends ListItemProps>({ dataSource, withSearch, texts, children, trigger, placement, maxVisibleItems, size, open, onOpenChange, onDismiss, onSearchQueryChange, getPopupContainer, virtualised, disabled, asChild, hideOnItemClick, itemMatchesSearchQuery, footer, overlayStyle, overlayClassName, overlayHTMLAttributes, popoverProps, popoverTriggerProps, }: DropdownMenuProps<ItemType>) => React.JSX.Element;