@synerise/ds-dropdown 1.0.34 → 1.1.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.
 
+# [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;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,132 @@
+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 { useTheme } from '@synerise/ds-core';
+import Icon, { SearchM } from '@synerise/ds-icon';
+import SearchBar from '@synerise/ds-search-bar';
+import { DEFAULT_MATCHING_FUNCTION, MAX_VISIBLE_ITEMS } from '../../Dropdown.const';
+import { useDefaultTexts } from '../../hooks/useDefaultTexts';
+import { DropdownFooter } from '../DropdownFooter/DropdownFooter';
+import { DropdownMenuList } from '../DropdownMenuList/DropdownMenuList';
+import { DropdownPopover } from '../DropdownPopover/DropdownPopover';
+export var DropdownMenu = function DropdownMenu(_ref) {
+  var dataSource = _ref.dataSource,
+    withSearch = _ref.withSearch,
+    texts = _ref.texts,
+    children = _ref.children,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottomLeft' : _ref$placement,
+    _ref$maxVisibleItems = _ref.maxVisibleItems,
+    maxVisibleItems = _ref$maxVisibleItems === void 0 ? MAX_VISIBLE_ITEMS : _ref$maxVisibleItems,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'auto' : _ref$size,
+    open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    onDismiss = _ref.onDismiss,
+    onSearchQueryChange = _ref.onSearchQueryChange,
+    getPopupContainer = _ref.getPopupContainer,
+    virtualised = _ref.virtualised,
+    disabled = _ref.disabled,
+    asChild = _ref.asChild,
+    _ref$hideOnItemClick = _ref.hideOnItemClick,
+    hideOnItemClick = _ref$hideOnItemClick === void 0 ? true : _ref$hideOnItemClick,
+    _ref$itemMatchesSearc = _ref.itemMatchesSearchQuery,
+    itemMatchesSearchQuery = _ref$itemMatchesSearc === void 0 ? DEFAULT_MATCHING_FUNCTION : _ref$itemMatchesSearc,
+    footer = _ref.footer,
+    overlayStyle = _ref.overlayStyle,
+    overlayClassName = _ref.overlayClassName,
+    overlayHTMLAttributes = _ref.overlayHTMLAttributes,
+    popoverProps = _ref.popoverProps,
+    popoverTriggerProps = _ref.popoverTriggerProps;
+  var _useState = useState(null),
+    activeIndex = _useState[0],
+    setActiveIndex = _useState[1];
+  var _useState2 = useState(''),
+    searchQuery = _useState2[0],
+    setSearchQuery = _useState2[1];
+  var _useState3 = useState(open),
+    isOpen = _useState3[0],
+    setIsOpen = _useState3[1];
+  var allTexts = useDefaultTexts(texts);
+  var theme = useTheme();
+  var toggleOpen = useCallback(function (openState) {
+    onOpenChange == null || onOpenChange(openState);
+    setIsOpen(openState);
+  }, [onOpenChange]);
+  useEffect(function () {
+    if (open !== undefined) {
+      setIsOpen(open);
+    }
+  }, [open, toggleOpen]);
+  var handleSearchChange = useCallback(function (query) {
+    onSearchQueryChange == null || onSearchQueryChange(query);
+    setSearchQuery(query);
+  }, [onSearchQueryChange]);
+  var filteredItems = useMemo(function () {
+    return searchQuery ? dataSource.filter(function (item) {
+      return itemMatchesSearchQuery(item, searchQuery);
+    }).map(function (item) {
+      var props = _extends({}, item, {
+        highlight: searchQuery
+      });
+      return props;
+    }) : dataSource;
+  }, [dataSource, itemMatchesSearchQuery, searchQuery]);
+  var handleSearchFocus = useCallback(function (ref) {
+    setTimeout(function () {
+      var _ref$current;
+      activeIndex != null ? activeIndex : ref == null || (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
+    }, 10);
+  }, [activeIndex]);
+  var overlay = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, withSearch && /*#__PURE__*/React.createElement(SearchBar, {
+      placeholder: allTexts.searchPlaceholder,
+      value: searchQuery,
+      handleInputRef: handleSearchFocus,
+      onSearchChange: handleSearchChange,
+      iconLeft: /*#__PURE__*/React.createElement(Icon, {
+        component: /*#__PURE__*/React.createElement(SearchM, null),
+        color: theme.palette['grey-600']
+      }),
+      onClearInput: function onClearInput() {
+        return setSearchQuery('');
+      },
+      clearTooltip: allTexts.searchClearTooltip
+    }), /*#__PURE__*/React.createElement(DropdownMenuList, {
+      maxVisibleItems: maxVisibleItems,
+      hideOnItemClick: hideOnItemClick,
+      dataSource: filteredItems,
+      closeOverlay: function closeOverlay() {
+        return toggleOpen(false);
+      },
+      texts: allTexts,
+      virtualised: virtualised
+    }), footer && /*#__PURE__*/React.createElement(DropdownFooter, {
+      footer: footer
+    }));
+  }, [withSearch, allTexts, searchQuery, handleSearchFocus, handleSearchChange, theme.palette, maxVisibleItems, hideOnItemClick, filteredItems, virtualised, footer, toggleOpen]);
+  return disabled || dataSource.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(DropdownPopover, {
+    getPopupContainer: getPopupContainer,
+    overlayHTMLAttributes: overlayHTMLAttributes,
+    overlayStyle: overlayStyle,
+    overlayClassName: overlayClassName,
+    trigger: trigger,
+    open: isOpen,
+    size: size,
+    placement: placement,
+    asChild: asChild,
+    onDismiss: onDismiss,
+    overlay: overlay,
+    handleOpenChange: toggleOpen,
+    handleTriggerClick: function handleTriggerClick() {
+      toggleOpen(!isOpen);
+    },
+    activeIndex: activeIndex,
+    setActiveIndex: setActiveIndex,
+    popoverProps: _extends({}, popoverProps, {
+      componentId: 'dropdown-menu'
+    }),
+    popoverTriggerProps: popoverTriggerProps
+  }, children);
+};