@synerise/ds-dropdown 1.0.33 → 1.1.0

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);
+};

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { ListItemProps } from '@synerise/ds-list-item';
+import { type DropdownSharedProps } from '../../Dropdown.types';
+export type DropdownMenuTexts = {
+    searchPlaceholder: string;
+    noSearchResults: ReactNode;
+    searchClearTooltip: ReactNode;
+};
+export type DropdownMenuProps<ItemType extends ListItemProps> = Omit<DropdownSharedProps, 'overlay' | 'dropdownRender' | 'defaultOpen' | 'align' | 'hideOnItemClick'> & {
+    dataSource: ItemType[];
+    hideOnItemClick?: boolean;
+    virtualised?: boolean;
+    withSearch?: boolean;
+    maxVisibleItems?: number;
+    texts?: Partial<DropdownMenuTexts>;
+    itemMatchesSearchQuery?: (item: ItemType, query: string) => boolean;
+    onSearchQueryChange?: (query: string) => void;
+};

package/dist/components/DropdownMenu/DropdownMenu.types.js

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

package/dist/components/DropdownMenuList/DropdownMenuList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type ListItemProps } from '@synerise/ds-list-item';
+import { type DropdownMenuListProps } from './DropdownMenuList.types';
+export declare const DropdownMenuList: <ItemType extends ListItemProps>({ dataSource, maxVisibleItems, hideOnItemClick, virtualised, closeOverlay, texts, }: DropdownMenuListProps<ItemType>) => React.JSX.Element;

package/dist/components/DropdownMenuList/DropdownMenuList.js

@@ -0,0 +1,84 @@
+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, useMemo } from 'react';
+import { VariableSizeList } from 'react-window';
+import { SearchNoResultsL } from '@synerise/ds-icon';
+import { LIST_ITEM_SIZE_MAPPING } from '@synerise/ds-list-item';
+import Scrollbar from '@synerise/ds-scrollbar';
+import { MAX_VISIBLE_ITEMS, SCROLLBAR_OFFSET } from '../../Dropdown.const';
+import * as S from './DropdownMenuList.styles';
+export var DropdownMenuList = function DropdownMenuList(_ref) {
+  var dataSource = _ref.dataSource,
+    _ref$maxVisibleItems = _ref.maxVisibleItems,
+    maxVisibleItems = _ref$maxVisibleItems === void 0 ? MAX_VISIBLE_ITEMS : _ref$maxVisibleItems,
+    hideOnItemClick = _ref.hideOnItemClick,
+    virtualised = _ref.virtualised,
+    closeOverlay = _ref.closeOverlay,
+    texts = _ref.texts;
+  var getItemSize = useCallback(function (index) {
+    return dataSource[index].type === 'divider' ? 17 : LIST_ITEM_SIZE_MAPPING[dataSource[index].size || 'default'];
+  }, [dataSource]);
+  var handleItemClick = useCallback(function () {
+    if (hideOnItemClick) {
+      setTimeout(function () {
+        closeOverlay();
+      }, 10);
+    }
+  }, [hideOnItemClick, closeOverlay]);
+  var _useMemo = useMemo(function () {
+      var height = 0;
+      var maxHeight = 0;
+      var visibleItems = 0;
+      dataSource.forEach(function (item, index) {
+        var itemHeight = getItemSize(index);
+        height += itemHeight;
+        if (visibleItems < maxVisibleItems) {
+          maxHeight += itemHeight;
+        }
+        if (item.type !== 'divider') {
+          visibleItems += 1;
+        }
+      });
+      return {
+        listHeight: height,
+        listMaxHeight: maxHeight
+      };
+    }, [dataSource, getItemSize, maxVisibleItems]),
+    listHeight = _useMemo.listHeight,
+    listMaxHeight = _useMemo.listMaxHeight;
+  return /*#__PURE__*/React.createElement(S.ScrollableMenuWrapper, null, dataSource.length ? /*#__PURE__*/React.createElement(Scrollbar, {
+    absolute: true,
+    maxHeight: listMaxHeight + SCROLLBAR_OFFSET
+  }, /*#__PURE__*/React.createElement(S.DropdownMenuList, null, virtualised ? /*#__PURE__*/React.createElement(VariableSizeList, {
+    height: listHeight,
+    itemData: dataSource,
+    itemCount: dataSource.length,
+    itemSize: getItemSize,
+    width: "100%",
+    style: {
+      paddingRight: '8px'
+    }
+  }, function (listItemData) {
+    var data = listItemData.data,
+      index = listItemData.index;
+    var item = data[index];
+    return item.type === 'divider' ? /*#__PURE__*/React.createElement(S.DropdownMenuListItem, item) : /*#__PURE__*/React.createElement(S.DropdownMenuListItem, _extends({}, item, {
+      itemKey: item.key,
+      onClick: function onClick(itemData) {
+        item.onClick == null || item.onClick(itemData);
+        handleItemClick();
+      }
+    }));
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, dataSource.map(function (item) {
+    return item.type === 'divider' ? /*#__PURE__*/React.createElement(S.DropdownMenuListItem, item) : /*#__PURE__*/React.createElement(S.DropdownMenuListItem, _extends({}, item, {
+      itemKey: item.key,
+      onClick: function onClick(itemData) {
+        item.onClick == null || item.onClick(itemData);
+        handleItemClick();
+      }
+    }));
+  })))) : /*#__PURE__*/React.createElement(S.EmptyStates, {
+    iconPosition: "top",
+    customIcon: /*#__PURE__*/React.createElement(SearchNoResultsL, null),
+    label: texts.noSearchResults
+  }));
+};

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

@@ -0,0 +1,40 @@
+export declare const ScrollableMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EmptyStates: 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 DropdownMenuListItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-list-item/dist/ListItem.types").ListItemDividerProps & {
+    checked?: boolean;
+    selected?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    copyable?: boolean | import("@synerise/ds-list-item/dist/ListItem.types").Copyable;
+    copyValue?: string;
+    copyHint?: React.ReactNode;
+    copyTooltip?: React.ReactNode;
+    timeToHideTooltip?: number;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+    description?: React.ReactNode;
+    direction?: "ltr" | "rtl";
+    disabled?: boolean;
+    highlight?: string;
+    hoverTooltipProps?: Pick<import("rc-trigger").TriggerProps, "onPopupVisibleChange" | "onPopupClick" | "mouseEnterDelay" | "mouseLeaveDelay" | "defaultPopupVisible" | "action" | "afterPopupVisibleChange" | "popupPlacement" | "getPopupContainer" | "forceRender"> & {
+        ref?: React.LegacyRef<import("@synerise/ds-list-item/dist/ListItem.types").TriggerHandle>;
+    };
+    key?: React.Key;
+    itemKey?: React.Key;
+    noHover?: boolean;
+    onItemHover?: import("@synerise/ds-list-item").ListItemEventHandler<import("react").MouseEvent<HTMLDivElement>>;
+    onClick?: import("@synerise/ds-list-item").ListItemEventHandler<import("react").MouseEvent<HTMLDivElement> | import("react").KeyboardEvent<HTMLDivElement>>;
+    ordered?: boolean;
+    parent?: boolean;
+    prefixel?: React.ReactNode | import("@synerise/ds-list-item/dist/ListItem.types").AddonRenderer;
+    prefixVisibilityTrigger?: "hover" | "default";
+    renderHoverTooltip?: () => JSX.Element;
+    size?: import("@synerise/ds-list-item").ItemSize;
+    suffixel?: React.ReactNode | import("@synerise/ds-list-item/dist/ListItem.types").AddonRenderer;
+    suffixVisibilityTrigger?: "hover" | "default";
+    text?: React.ReactNode;
+    type?: import("@synerise/ds-list-item").ItemType;
+    subMenu?: import("@synerise/ds-list-item").ListItemProps[];
+    indentLevel?: number;
+} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "className" | "children" | "onClick" | "disabled" | "size" | keyof import("@synerise/ds-list-item/dist/ListItem.types").ListItemDividerProps | "checked" | "selected" | "copyable" | "copyValue" | "copyHint" | "copyTooltip" | "timeToHideTooltip" | "tooltipProps" | "description" | "direction" | "highlight" | "hoverTooltipProps" | "key" | "itemKey" | "noHover" | "onItemHover" | "ordered" | "parent" | "prefixel" | "prefixVisibilityTrigger" | "renderHoverTooltip" | "suffixel" | "suffixVisibilityTrigger" | "text" | "type" | "subMenu" | "indentLevel"> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const DropdownMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DropdownMenuList/DropdownMenuList.styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import EmptyStatesBase from '@synerise/ds-empty-states';
+import ListItemBase from '@synerise/ds-list-item';
+export var ScrollableMenuWrapper = styled.div.withConfig({
+  displayName: "DropdownMenuListstyles__ScrollableMenuWrapper",
+  componentId: "sc-1lf08nj-0"
+})(["padding:8px 0 8px 8px;"]);
+export var MenuWrapper = styled.div.withConfig({
+  displayName: "DropdownMenuListstyles__MenuWrapper",
+  componentId: "sc-1lf08nj-1"
+})(["padding:8px;"]);
+export var EmptyStates = styled(EmptyStatesBase).withConfig({
+  displayName: "DropdownMenuListstyles__EmptyStates",
+  componentId: "sc-1lf08nj-2"
+})(["margin:48px 0;"]);
+export var DropdownMenuListItem = styled(ListItemBase).withConfig({
+  displayName: "DropdownMenuListstyles__DropdownMenuListItem",
+  componentId: "sc-1lf08nj-3"
+})(["min-width:0;"]);
+export var DropdownMenuList = styled.div.withConfig({
+  displayName: "DropdownMenuListstyles__DropdownMenuList",
+  componentId: "sc-1lf08nj-4"
+})(["padding-right:8px;"]);

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

@@ -0,0 +1,7 @@
+import { type ListItemProps } from '@synerise/ds-list-item';
+import { type DropdownMenuProps, type DropdownMenuTexts } from '../DropdownMenu/DropdownMenu.types';
+export type DropdownMenuListItemProps = ListItemProps;
+export type DropdownMenuListProps<ItemType extends DropdownMenuListItemProps> = Pick<DropdownMenuProps<ItemType>, 'dataSource' | 'hideOnItemClick' | 'virtualised' | 'maxVisibleItems'> & {
+    closeOverlay: () => void;
+    texts: DropdownMenuTexts;
+};

package/dist/components/DropdownMenuList/DropdownMenuList.types.js

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

package/dist/components/DropdownOverlay/DropdownOverlay.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const DropdownOverlay: React.ForwardRefExoticComponent<Pick<import("../..").DropdownProps, "overlayStyle" | "overlayClassName" | "size" | "hideOnItemClick"> & {
+    content: React.ReactNode;
+    triggerRef: React.RefObject<HTMLElement>;
+    htmlAttributes?: React.HTMLAttributes<HTMLDivElement>;
+    handleItemClick?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DropdownOverlay/DropdownOverlay.js

@@ -0,0 +1,73 @@
+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 classnames from 'classnames';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { getDropdownWidth } from '../../utils';
+import { OverlayWrapper } from './DropdownOverlay.styles';
+export var DropdownOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _getDropdownWidth;
+  var content = _ref.content,
+    size = _ref.size,
+    overlayStyle = _ref.overlayStyle,
+    overlayClassName = _ref.overlayClassName,
+    htmlAttributes = _ref.htmlAttributes,
+    hideOnItemClick = _ref.hideOnItemClick,
+    handleItemClick = _ref.handleItemClick,
+    triggerRef = _ref.triggerRef;
+  var overlayWrapperRef = useRef(null);
+  var mergedRef = useMergeRefs([overlayWrapperRef, ref]);
+  var _useState = useState((_getDropdownWidth = getDropdownWidth(size)) != null ? _getDropdownWidth : 0),
+    overlaySize = _useState[0],
+    setOverlaySize = _useState[1];
+  useEffect(function () {
+    if (triggerRef.current && (size === 'match-trigger' || size === 'min-match-trigger')) {
+      setOverlaySize(triggerRef.current.clientWidth);
+    } else {
+      var _getDropdownWidth2;
+      setOverlaySize((_getDropdownWidth2 = getDropdownWidth(size)) != null ? _getDropdownWidth2 : 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [size]);
+  useEffect(function () {
+    var handleItemSelect = function handleItemSelect(element) {
+      var _overlayWrapperRef$cu;
+      var itemSelector = typeof hideOnItemClick === 'string' ? hideOnItemClick : '[role="menuitem"]';
+      var listItem = element.closest(itemSelector);
+      if ((_overlayWrapperRef$cu = overlayWrapperRef.current) != null && _overlayWrapperRef$cu.contains(listItem)) {
+        setTimeout(function () {
+          handleItemClick == null || handleItemClick();
+        }, 0);
+      }
+    };
+    var handleOverlayClick = function handleOverlayClick(event) {
+      if (overlayWrapperRef.current && typeof hideOnItemClick === 'string' && event.target instanceof HTMLElement) {
+        handleItemSelect(event.target);
+      }
+    };
+    var handleItemEnterPress = function handleItemEnterPress(event) {
+      if (event.key === 'Enter') {
+        if (overlayWrapperRef.current && typeof hideOnItemClick === 'string' && event.target instanceof HTMLElement) {
+          handleItemSelect(event.target);
+        }
+      }
+    };
+    var overlayNode = overlayWrapperRef.current;
+    if (overlayNode) {
+      overlayNode.addEventListener('click', handleOverlayClick);
+      overlayNode.addEventListener('keydown', handleItemEnterPress);
+    }
+    return function () {
+      if (overlayNode) {
+        overlayNode.removeEventListener('click', handleOverlayClick);
+        overlayNode.removeEventListener('keydown', handleItemEnterPress);
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(OverlayWrapper, _extends({
+    style: overlayStyle,
+    className: classnames(overlayClassName, htmlAttributes == null ? void 0 : htmlAttributes.className),
+    $width: overlaySize,
+    widthProperty: size === 'min-match-trigger' ? 'min-width' : 'width',
+    ref: mergedRef
+  }, htmlAttributes), content);
+});

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

@@ -0,0 +1,4 @@
+export declare const OverlayWrapper: import("styled-components").StyledComponent<"div", any, {
+    $width?: number;
+    widthProperty: string;
+}, never>;

package/dist/components/DropdownOverlay/DropdownOverlay.styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Wrapper as ListItemWrapper } from '@synerise/ds-list-item/dist/components/Text/Text.styles';
+export var OverlayWrapper = styled.div.withConfig({
+  displayName: "DropdownOverlaystyles__OverlayWrapper",
+  componentId: "sc-hy0f4i-0"
+})(["background:", ";box-shadow:", ";border-radius:3px;", ";overflow:hidden;", "{min-width:0;}"], function (props) {
+  return props.theme.palette.white;
+}, function (props) {
+  return props.theme.variables['box-shadow-2'];
+}, function (props) {
+  return props.$width && props.widthProperty + ": " + props.$width + "px";
+}, ListItemWrapper);

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

@@ -0,0 +1,8 @@
+import { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { type DropdownProps } from '../../Dropdown.types';
+export type DropdownOverlayProps = Pick<DropdownProps, 'size' | 'overlayStyle' | 'hideOnItemClick' | 'overlayClassName'> & {
+    content: ReactNode;
+    triggerRef: RefObject<HTMLElement>;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement>;
+    handleItemClick?: () => void;
+};

package/dist/components/DropdownOverlay/DropdownOverlay.types.js

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

package/dist/components/DropdownPopover/DropdownPopover.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type DropdownPopoverProps } from './DropdownPopover.types';
+export declare const DropdownPopover: ({ placement, children, popoverProps, popoverTriggerProps, getPopupContainer, trigger, open, onDismiss, overlay, handleOpenChange, size, handleItemClick, handleTriggerClick, hideOnItemClick, asChild, overlayStyle, overlayClassName, overlayHTMLAttributes, activeIndex, setActiveIndex, }: DropdownPopoverProps) => React.JSX.Element;

package/dist/components/DropdownPopover/DropdownPopover.js

@@ -0,0 +1,79 @@
+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, { useRef } from 'react';
+import { FloatingList } from '@floating-ui/react';
+import { DropdownContextProvider } from '@synerise/ds-core';
+import { Popover, PopoverContent, PopoverTrigger } from '@synerise/ds-popover';
+import { POPOVER_FLIP_CONFIG, POPOVER_OFFSET_CONFIG, POPOVER_SHIFT_CONFIG, POPOVER_TRANSITION_DURATION } from '../../Dropdown.const';
+import { getPlacement, getTransitionConfig } from '../../utils';
+import { DropdownOverlay } from '../DropdownOverlay/DropdownOverlay';
+export var DropdownPopover = function DropdownPopover(_ref) {
+  var _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottomLeft' : _ref$placement,
+    children = _ref.children,
+    popoverProps = _ref.popoverProps,
+    popoverTriggerProps = _ref.popoverTriggerProps,
+    getPopupContainer = _ref.getPopupContainer,
+    trigger = _ref.trigger,
+    open = _ref.open,
+    onDismiss = _ref.onDismiss,
+    overlay = _ref.overlay,
+    handleOpenChange = _ref.handleOpenChange,
+    size = _ref.size,
+    handleItemClick = _ref.handleItemClick,
+    handleTriggerClick = _ref.handleTriggerClick,
+    hideOnItemClick = _ref.hideOnItemClick,
+    asChild = _ref.asChild,
+    overlayStyle = _ref.overlayStyle,
+    overlayClassName = _ref.overlayClassName,
+    overlayHTMLAttributes = _ref.overlayHTMLAttributes,
+    activeIndex = _ref.activeIndex,
+    setActiveIndex = _ref.setActiveIndex;
+  var floatingPlacement = getPlacement(placement);
+  var triggerRef = useRef(null);
+  var elementsRef = useRef([]);
+  var listNavigationConfig = {
+    enabled: true,
+    activeIndex: activeIndex,
+    onNavigate: function onNavigate(newIndex) {
+      setActiveIndex(newIndex);
+    },
+    listRef: elementsRef
+  };
+  return /*#__PURE__*/React.createElement(Popover, _extends({
+    placement: floatingPlacement,
+    trigger: trigger,
+    modal: false,
+    open: open,
+    onOpenChange: handleOpenChange,
+    onDismiss: onDismiss,
+    transitionDuration: POPOVER_TRANSITION_DURATION,
+    autoUpdate: true,
+    offsetConfig: POPOVER_OFFSET_CONFIG,
+    flipConfig: POPOVER_FLIP_CONFIG,
+    shiftConfig: POPOVER_SHIFT_CONFIG,
+    getTransitionConfig: getTransitionConfig,
+    getPopupContainer: getPopupContainer,
+    listNavigationConfig: listNavigationConfig,
+    testId: "dropdown"
+  }, popoverProps), /*#__PURE__*/React.createElement(PopoverTrigger, _extends({
+    ref: triggerRef,
+    asChild: asChild,
+    onClick: handleTriggerClick
+  }, popoverTriggerProps), children), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement(DropdownContextProvider, {
+    hideOnItemClick: hideOnItemClick,
+    activeIndex: activeIndex,
+    setIsOpen: handleOpenChange,
+    isOpen: !!open
+  }, /*#__PURE__*/React.createElement(FloatingList, {
+    elementsRef: elementsRef
+  }, /*#__PURE__*/React.createElement(DropdownOverlay, {
+    size: size,
+    triggerRef: triggerRef,
+    htmlAttributes: overlayHTMLAttributes,
+    overlayStyle: overlayStyle,
+    overlayClassName: overlayClassName,
+    hideOnItemClick: hideOnItemClick,
+    content: overlay,
+    handleItemClick: handleItemClick
+  })))));
+};

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

@@ -0,0 +1,8 @@
+import { type DropdownProps } from '../../Dropdown.types';
+export type DropdownPopoverProps = Pick<DropdownProps, 'asChild' | 'children' | 'onDismiss' | 'onOpenChange' | 'getPopupContainer' | 'placement' | 'popoverProps' | 'popoverTriggerProps' | 'overlay' | 'overlayClassName' | 'overlayHTMLAttributes' | 'overlayStyle' | 'open' | 'hideOnItemClick' | 'size' | 'trigger'> & {
+    handleOpenChange: (newVal: boolean) => void;
+    handleItemClick?: () => void;
+    handleTriggerClick: () => void;
+    setActiveIndex: (index: number | null) => void;
+    activeIndex: number | null;
+};

package/dist/components/DropdownPopover/DropdownPopover.types.js

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

package/dist/components/TextTrigger/TextTrigger.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type TextTriggerProps } from './TextTrigger.types';
+export declare const TextTrigger: React.ForwardRefExoticComponent<TextTriggerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import { theme } from '@synerise/ds-core';
+import React, { forwardRef } from 'react';
+import { useTheme } from '@synerise/ds-core';
 import Icon, { AngleDownS } from '@synerise/ds-icon';
 import { Title } from '@synerise/ds-typography';
 import * as S from './TextTrigger.styles';
-var TextTrigger = function TextTrigger(_ref) {
+export var TextTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     expanded = _ref.expanded,
     size = _ref.size,
@@ -13,10 +13,12 @@ var TextTrigger = function TextTrigger(_ref) {
     onFocus = _ref.onFocus,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(S.TextTrigger, {
     onFocus: isDisabled ? undefined : onFocus,
     inactiveColor: theme.palette[inactiveColor],
     tabIndex: 0,
+    ref: ref,
     onClick: isDisabled ? undefined : onClick,
     isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(Title, {
@@ -26,5 +28,4 @@ var TextTrigger = function TextTrigger(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(AngleDownS, null)
   })));
-};
-export default TextTrigger;
+});

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 export var TextTrigger = styled.div.withConfig({
   displayName: "TextTriggerstyles__TextTrigger",
-  componentId: "sc-4ebj2t-0"
+  componentId: "sc-xuqby2-0"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:", ";opacity:", ";.ds-title{margin:0;}.ds-title,svg{color:", ";fill:", ";}&&&:focus{.ds-title,svg{color:", ";fill:", ";}}}&:hover{.ds-title,svg{color:", ";fill:", ";}}"], function (props) {
   return props.isDisabled ? 'default' : 'pointer';
 }, function (props) {
@@ -21,7 +21,7 @@ export var TextTrigger = styled.div.withConfig({
 });
 export var IconWrapper = styled.div.withConfig({
   displayName: "TextTriggerstyles__IconWrapper",
-  componentId: "sc-4ebj2t-1"
+  componentId: "sc-xuqby2-1"
 })(["&&&{svg{transition:transform 0.1s linear;transform:rotateZ( ", " );}}"], function (props) {
   return props.expanded ? '180deg' : '0deg';
 });

package/dist/{elements → components}/TextTrigger/TextTrigger.types.d.ts

@@ -3,7 +3,7 @@ export type TextTriggerProps = {
     value: string | React.ReactNode | undefined;
     inactiveColor?: string;
     size: 1 | 2 | 3 | 4 | 5 | 6;
-    onClick: () => void;
+    onClick?: () => void;
     onFocus?: () => void;
     expanded?: boolean;
     isDisabled?: boolean;

package/dist/components/TextTrigger/TextTrigger.types.js

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

package/dist/hooks/useDefaultTexts.d.ts

@@ -0,0 +1,2 @@
+import { type DropdownMenuTexts } from '../components/DropdownMenu/DropdownMenu.types';
+export declare const useDefaultTexts: (customTexts?: Partial<DropdownMenuTexts>) => DropdownMenuTexts;

package/dist/hooks/useDefaultTexts.js

@@ -0,0 +1,21 @@
+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 from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+export var useDefaultTexts = function useDefaultTexts(customTexts) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return _extends({
+    noSearchResults: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.DROPDOWN-MENU.NO-SEARCH-RESULTS",
+      defaultMessage: "No results"
+    }),
+    searchClearTooltip: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.CONFIRMATION.SEARCH-CLEAR-TOOLTIP",
+      defaultMessage: "Clear"
+    }),
+    searchPlaceholder: formatMessage({
+      id: 'DS.DROPDOWN-MENU.SEARCH-PLACEHOLDER',
+      defaultMessage: 'Search'
+    })
+  }, customTexts || {});
+};

package/dist/hooks/useDropdownVisibility.d.ts

@@ -0,0 +1,10 @@
+type UseDropdownVisibilityProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (newState: boolean) => void;
+};
+export declare const useDropdownVisibility: ({ open, onOpenChange, }: UseDropdownVisibilityProps) => {
+    toggleOpen: (openState: boolean) => void;
+    open: boolean | undefined;
+};
+export {};